
<!DOCTYPE HTML>
<html lang="zh-hans" >
    <head>
        <meta charset="UTF-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>灵活运用CSS开发技巧 · 记录技术文档内容</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="description" content="">
        <meta name="generator" content="GitBook 3.2.3">
        <meta name="author" content="zhengyuliang">
        
        
    
    <link rel="stylesheet" href="../gitbook/style.css">

    
            
                
                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-sectionx/sectionx.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-splitter/splitter.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-tbfed-pagefooter/footer.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-toggle-chapters/toggle.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-search-plus/search.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-donate/plugin.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-anchor-navigation-ex/style/plugin.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-expandable-chapters/expandable-chapters.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-chapter-fold/chapter-fold.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-expandable-chapters-small/expandable-chapters-small.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-fontsettings/website.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-theme-comscore/test.css">
                
            
        

    

    
        
    
        
    
        
    
        
    
        
    
        
    

        
    
    
    <meta name="HandheldFriendly" content="true"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">

    
    <link rel="next" href="自适应 flex grid.html" />
    
    
    <link rel="prev" href="18种CSS命名和书写规范.html" />
    

    </head>
    <body>
        
<div class="book">
    <div class="book-summary">
        
            
<div id="book-search-input" role="search">
    <input type="text" placeholder="输入并搜索" />
</div>

            
                <nav role="navigation">
                


<ul class="summary">
    
    

    

    
        
        <li class="header">CSS</li>
        
        
    
        <li class="chapter " data-level="1.1" data-path="../">
            
                <a href="../">
            
                    
                    Introduction
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="18种CSS命名和书写规范.html">
            
                <a href="18种CSS命名和书写规范.html">
            
                    
                    18种CSS命名和书写规范
            
                </a>
            

            
        </li>
    
        <li class="chapter active" data-level="1.3" data-path="灵活运用CSS开发技巧.html">
            
                <a href="灵活运用CSS开发技巧.html">
            
                    
                    灵活运用CSS开发技巧
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4" data-path="自适应 flex grid.html">
            
                <a href="自适应 flex grid.html">
            
                    
                    自适应 Flex Grid
            
                </a>
            

            
        </li>
    

    
        
        <li class="header">HTML</li>
        
        
    
        <li class="chapter " data-level="2.1" data-path="../HTML/浏览器里的本地数据库：IndexedDB.html">
            
                <a href="../HTML/浏览器里的本地数据库：IndexedDB.html">
            
                    
                    浏览器里的本地数据库：IndexedDB
            
                </a>
            

            
        </li>
    

    
        
        <li class="header">Vue</li>
        
        
    
        <li class="chapter " data-level="3.1" data-path="../Vue/7个有用的Vue开发技巧.html">
            
                <a href="../Vue/7个有用的Vue开发技巧.html">
            
                    
                    7个有用的Vue开发技巧
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="3.2" data-path="../Vue/Vue this.$router.push、replace、go的区别.html">
            
                <a href="../Vue/Vue this.$router.push、replace、go的区别.html">
            
                    
                    Vue This.$Router.Push、Replace、Go的区别
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="3.3" data-path="../Vue/Vue 的父组件和子组件生命周期钩子函数执行顺序？.html">
            
                <a href="../Vue/Vue 的父组件和子组件生命周期钩子函数执行顺序？.html">
            
                    
                    Vue 的父组件和子组件生命周期钩子函数执行顺序？
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="3.4" data-path="../Vue/Vue.set和this.$set应用的场景.html">
            
                <a href="../Vue/Vue.set和this.$set应用的场景.html">
            
                    
                    Vue.Set和This.$Set应用的场景
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="3.5" data-path="../Vue/vue高级技巧.html">
            
                <a href="../Vue/vue高级技巧.html">
            
                    
                    Vue高级技巧
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="3.6" data-path="../Vue/从 0 开始手把手带你搭建一套规范的 Vue3.x 项目工程环境.html">
            
                <a href="../Vue/从 0 开始手把手带你搭建一套规范的 Vue3.x 项目工程环境.html">
            
                    
                    从 0 开始手把手带你搭建一套规范的 Vue3.X 项目工程环境
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="3.7" data-path="../Vue/浅析 vue-router 源码和动态路由权限分配.html">
            
                <a href="../Vue/浅析 vue-router 源码和动态路由权限分配.html">
            
                    
                    浅析 Vue Router 源码和动态路由权限分配
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="3.8" data-path="../Vue/父组件监听到子组件的生命周期.html">
            
                <a href="../Vue/父组件监听到子组件的生命周期.html">
            
                    
                    父组件监听到子组件的生命周期
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="3.9" data-path="../Vue/理解Vue.mixin，利用Vue.mixin正确的偷懒.html">
            
                <a href="../Vue/理解Vue.mixin，利用Vue.mixin正确的偷懒.html">
            
                    
                    理解Vue.Mixin，利用Vue.Mixin正确的偷懒
            
                </a>
            

            
        </li>
    

    
        
        <li class="header">JavaScript</li>
        
        
    
        <li class="chapter " data-level="4.1" data-path="../javaScript/5个技巧让你更好的编写 JavaScript(ES6">
            
                <span>
            
                    
                    5个技巧让你更好的编写 JavaScript(ES6) 中条件语句
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="4.2" data-path="../javaScript/5种常见函数的写法和调用方式.html">
            
                <a href="../javaScript/5种常见函数的写法和调用方式.html">
            
                    
                    5种常见函数的写法和调用方式
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="4.3" data-path="../javaScript/7道javascript题，让你理解基本的javascript.html">
            
                <a href="../javaScript/7道javascript题，让你理解基本的javascript.html">
            
                    
                    7道Javascript题，让你理解基本的Javascript
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="4.4" data-path="../javaScript/Array.from(">
            
                <span>
            
                    
                    Array.From() 五个超好用的用途
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="4.5" data-path="../javaScript/ES6汇总资料.html">
            
                <a href="../javaScript/ES6汇总资料.html">
            
                    
                    ES6汇总资料
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="4.6" data-path="../javaScript/JS开发必须知道的41个技巧.html">
            
                <a href="../javaScript/JS开发必须知道的41个技巧.html">
            
                    
                    JS开发必须知道的41个技巧
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="4.7" data-path="../javaScript/JavaScript之防抖Debounce和节流Throttle.html">
            
                <a href="../javaScript/JavaScript之防抖Debounce和节流Throttle.html">
            
                    
                    JavaScript之防抖Debounce和节流Throttle
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="4.8" data-path="../javaScript/JavaScript数组求并集，交集和差集.html">
            
                <a href="../javaScript/JavaScript数组求并集，交集和差集.html">
            
                    
                    JavaScript数组求并集，交集和差集
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="4.9" data-path="../javaScript/JavaScript的优雅写法.html">
            
                <a href="../javaScript/JavaScript的优雅写法.html">
            
                    
                    JavaScript的优雅写法
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="4.10" data-path="../javaScript/axios知识点.html">
            
                <a href="../javaScript/axios知识点.html">
            
                    
                    Axios知识点
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="4.11" data-path="../javaScript/javascript核心知识.html">
            
                <a href="../javaScript/javascript核心知识.html">
            
                    
                    Javascript核心知识
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="4.12" data-path="../javaScript/this、apply、call、bind.html">
            
                <a href="../javaScript/this、apply、call、bind.html">
            
                    
                    This、Apply、Call、Bind
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="4.13" data-path="../javaScript/前端js常用的60余种工具方法.html">
            
                <a href="../javaScript/前端js常用的60余种工具方法.html">
            
                    
                    前端Js常用的60余种工具方法
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="4.14" data-path="../javaScript/前端异常的捕获与处理.html">
            
                <a href="../javaScript/前端异常的捕获与处理.html">
            
                    
                    前端异常的捕获与处理
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="4.15" data-path="../javaScript/在 JavaScript 中交换值的 10 种方法.html">
            
                <a href="../javaScript/在 JavaScript 中交换值的 10 种方法.html">
            
                    
                    在 JavaScript 中交换值的 10 种方法
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="4.16" data-path="../javaScript/常用的前端JavaScript方法封装.html">
            
                <a href="../javaScript/常用的前端JavaScript方法封装.html">
            
                    
                    常用的前端JavaScript方法封装
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="4.17" data-path="../javaScript/异步神器Async-await介绍与填坑.html">
            
                <a href="../javaScript/异步神器Async-await介绍与填坑.html">
            
                    
                    异步神器Async Await介绍与填坑
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="4.18" data-path="../javaScript/灵活运用JS开发技巧.html">
            
                <a href="../javaScript/灵活运用JS开发技巧.html">
            
                    
                    灵活运用JS开发技巧
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="4.19" data-path="../javaScript/编写高质量可维护的代码：一目了然的注释.html">
            
                <a href="../javaScript/编写高质量可维护的代码：一目了然的注释.html">
            
                    
                    编写高质量可维护的代码：一目了然的注释
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="4.20" data-path="../javaScript/编写高质量可维护的代码：优化逻辑判断.html">
            
                <a href="../javaScript/编写高质量可维护的代码：优化逻辑判断.html">
            
                    
                    编写高质量可维护的代码：优化逻辑判断
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="4.21" data-path="../javaScript/编写高质量可维护的代码：优雅命名.html">
            
                <a href="../javaScript/编写高质量可维护的代码：优雅命名.html">
            
                    
                    编写高质量可维护的代码：优雅命名
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="4.22" data-path="../javaScript/编写高质量可维护的代码：数据建模.html">
            
                <a href="../javaScript/编写高质量可维护的代码：数据建模.html">
            
                    
                    编写高质量可维护的代码：数据建模
            
                </a>
            

            
        </li>
    

    
        
        <li class="header">Life Exp</li>
        
        
    
        <li class="chapter " data-level="5.1" data-path="../life_exp/告别平庸的15个小方法.html">
            
                <a href="../life_exp/告别平庸的15个小方法.html">
            
                    
                    告别平庸的15个小方法
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="5.2" data-path="../life_exp/日志记录.html">
            
                <a href="../life_exp/日志记录.html">
            
                    
                    日志记录
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="5.3" data-path="../life_exp/程序员的发展方向.html">
            
                <a href="../life_exp/程序员的发展方向.html">
            
                    
                    程序员的发展方向
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="5.4" data-path="../message/">
            
                <a href="../message/">
            
                    
                    Message
            
                </a>
            

            
        </li>
    

    
        
        <li class="header">Technology</li>
        
        
    
        <li class="chapter " data-level="6.1" data-path="../technology/WebSocket.html">
            
                <a href="../technology/WebSocket.html">
            
                    
                    WebSocket
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="6.2" data-path="../technology/npm常用命令大全.html">
            
                <a href="../technology/npm常用命令大全.html">
            
                    
                    Npm常用命令大全
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="6.3" data-path="../technology/智能照明项目说明.html">
            
                <a href="../technology/智能照明项目说明.html">
            
                    
                    智能照明项目说明
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="6.4" data-path="../technology/规范化git的提交信息.html">
            
                <a href="../technology/规范化git的提交信息.html">
            
                    
                    规范化Git的提交信息
            
                </a>
            

            
        </li>
    

    
        
        <li class="header">Tutorial</li>
        
        
    
        <li class="chapter " data-level="7.1" data-path="../tutorial/Esmap地图详解.html">
            
                <a href="../tutorial/Esmap地图详解.html">
            
                    
                    Esmap地图详解
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="7.2" data-path="../tutorial/npm镜像切换.html">
            
                <a href="../tutorial/npm镜像切换.html">
            
                    
                    Npm镜像切换
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="7.3" data-path="../tutorial/发布npm的教程.html">
            
                <a href="../tutorial/发布npm的教程.html">
            
                    
                    发布Npm的教程
            
                </a>
            

            
        </li>
    

    

    <li class="divider"></li>

    <li>
        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
            本书使用 GitBook 发布
        </a>
    </li>
</ul>


                </nav>
            
        
    </div>

    <div class="book-body">
        
            <div class="body-inner">
                
                    

<div class="book-header" role="navigation">
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href=".." >灵活运用CSS开发技巧</a>
    </h1>
</div>




                    <div class="page-wrapper" tabindex="-1" role="main">
                        <div class="page-inner">
                            
<div class="search-plus" id="book-search-results">
    <div class="search-noresults">
    
                                <section class="normal markdown-section">
                                
                                <html><head></head><body><div id="anchor-navigation-ex-navbar"><i class="fa fa-navicon"></i><ul><ul><ul><li><span class="title-icon "></span><a href="#&#x7075;&#x6D3B;&#x8FD0;&#x7528;css&#x5F00;&#x53D1;&#x6280;&#x5DE7;"><b>1.1.1. </b>&#x7075;&#x6D3B;&#x8FD0;&#x7528;CSS&#x5F00;&#x53D1;&#x6280;&#x5DE7;</a></li><li><span class="title-icon "></span><a href="#&#x524D;&#x8A00;"><b>1.1.2. </b>&#x524D;&#x8A00;</a></li><li><span class="title-icon "></span><a href="#&#x76EE;&#x5F55;"><b>1.1.3. </b>&#x76EE;&#x5F55;</a></li><li><span class="title-icon "></span><a href="#layout-skill"><b>1.1.4. </b>Layout Skill</a></li><li><span class="title-icon "></span><a href="#behavior-skill"><b>1.1.5. </b>Behavior Skill</a></li><li><span class="title-icon "></span><a href="#color-skill"><b>1.1.6. </b>Color Skill</a></li><li><span class="title-icon "></span><a href="#figure-skill"><b>1.1.7. </b>Figure Skill</a></li><li><span class="title-icon "></span><a href="#component-skill"><b>1.1.8. </b>Component Skill</a></li><li><span class="title-icon "></span><a href="#&#x603B;&#x7ED3;"><b>1.1.9. </b>&#x603B;&#x7ED3;</a></li></ul></ul></ul></div><a href="#" id="anchorNavigationExGoTop"><i class="fa fa-arrow-up"></i></a><h3 id="&#x7075;&#x6D3B;&#x8FD0;&#x7528;css&#x5F00;&#x53D1;&#x6280;&#x5DE7;"><a name="&#x7075;&#x6D3B;&#x8FD0;&#x7528;css&#x5F00;&#x53D1;&#x6280;&#x5DE7;" class="anchor-navigation-ex-anchor" href="#&#x7075;&#x6D3B;&#x8FD0;&#x7528;css&#x5F00;&#x53D1;&#x6280;&#x5DE7;"><i class="fa fa-link" aria-hidden="true"></i></a>1.1.1. &#x7075;&#x6D3B;&#x8FD0;&#x7528;CSS&#x5F00;&#x53D1;&#x6280;&#x5DE7;</h3>
<h3 id="&#x524D;&#x8A00;"><a name="&#x524D;&#x8A00;" class="anchor-navigation-ex-anchor" href="#&#x524D;&#x8A00;"><i class="fa fa-link" aria-hidden="true"></i></a>1.1.2. &#x524D;&#x8A00;</h3>
<p>&#x4F55;&#x4E3A;&#x6280;&#x5DE7;&#xFF0C;&#x610F;&#x6307;&#x8868;&#x73B0;&#x5728;&#x6587;&#x5B66;&#x3001;&#x5DE5;&#x827A;&#x3001;&#x4F53;&#x80B2;&#x7B49;&#x65B9;&#x9762;&#x7684;&#x5DE7;&#x5999;&#x6280;&#x80FD;&#x3002;&#x4EE3;&#x7801;&#x4F5C;&#x4E3A;&#x4E00;&#x95E8;&#x73B0;&#x4EE3;&#x9AD8;&#x7EA7;&#x5DE5;&#x827A;&#xFF0C;&#x63A8;&#x52A8;&#x7740;&#x4EBA;&#x7C7B;&#x79D1;&#x5B66;&#x6280;&#x672F;&#x7684;&#x53D1;&#x5C55;&#xFF0C;&#x540C;&#x65F6;&#x72B9;&#x5982;&#x6587;&#x5B57;&#x4E00;&#x6837;&#x627F;&#x6258;&#x7740;&#x4EBA;&#x7C7B;&#x6587;&#x5316;&#x7684;&#x8FDB;&#x6B65;&#x3002;</p>
<p>&#x6BCF;&#x5199;&#x597D;&#x4E00;&#x7BC7;&#x6587;&#x7AE0;&#xFF0C;&#x90FD;&#x4F1A;&#x4F7F;&#x7528;&#x5927;&#x91CF;&#x7684;&#x5199;&#x4F5C;&#x6280;&#x5DE7;&#x3002;<code>&#x70D8;&#x6258;&#x3001;&#x6E32;&#x67D3;&#x3001;&#x60AC;&#x5FF5;&#x3001;&#x94FA;&#x57AB;&#x3001;&#x7167;&#x5E94;&#x3001;&#x4F0F;&#x7B14;&#x3001;&#x8054;&#x60F3;&#x3001;&#x60F3;&#x8C61;&#x3001;&#x6291;&#x626C;&#x7ED3;&#x5408;&#x3001;&#x70B9;&#x9762;&#x7ED3;&#x5408;&#x3001;&#x52A8;&#x9759;&#x7ED3;&#x5408;&#x3001;&#x53D9;&#x8BAE;&#x7ED3;&#x5408;&#x3001;&#x60C5;&#x666F;&#x4EA4;&#x878D;&#x3001;&#x9996;&#x5C3E;&#x547C;&#x5E94;&#x3001;&#x886C;&#x6258;&#x5BF9;&#x6BD4;&#x3001;&#x767D;&#x63CF;&#x7EC6;&#x63CF;&#x3001;&#x6BD4;&#x55BB;&#x8C61;&#x5F81;&#x3001;&#x501F;&#x53E4;&#x8BBD;&#x4ECA;&#x3001;&#x5352;&#x7AE0;&#x663E;&#x5FD7;&#x3001;&#x627F;&#x4E0A;&#x542F;&#x4E0B;&#x3001;&#x5F00;&#x95E8;&#x89C1;&#x5C71;&#x3001;&#x52A8;&#x9759;&#x76F8;&#x886C;&#x3001;&#x865A;&#x5B9E;&#x76F8;&#x751F;&#x3001;&#x5B9E;&#x5199;&#x865A;&#x5199;&#x3001;&#x6258;&#x7269;&#x5BD3;&#x610F;&#x3001;&#x548F;&#x7269;&#x6292;&#x60C5;</code>&#x7B49;&#xFF0C;&#x8FD9;&#x4E9B;&#x5E94;&#x8BE5;&#x90FD;&#x662F;&#x6211;&#x4EEC;&#x4ECE;&#x5C0F;&#x5230;&#x5927;&#x5199;&#x6587;&#x7AE0;&#x800C;&#x63A5;&#x89E6;&#x5230;&#x7684;&#x5199;&#x4F5C;&#x6280;&#x5DE7;&#x3002;</p>
<p>&#x4F5C;&#x4E3A;&#x7A0B;&#x5E8F;&#x733F;&#x7684;&#x6211;&#x4EEC;&#xFF0C;&#x5199;&#x4EE3;&#x7801;&#x540C;&#x6837;&#x4E5F;&#x9700;&#x8981;&#x5927;&#x91CF;&#x7684;&#x5199;&#x4F5C;&#x6280;&#x5DE7;&#x3002;&#x4E00;&#x4EFD;&#x826F;&#x597D;&#x7684;&#x4EE3;&#x7801;&#x80FD;&#x8BA9;&#x4EBA;&#x8033;&#x76EE;&#x4E00;&#x65B0;&#xFF0C;&#x8BA9;&#x4EBA;&#x5BB9;&#x6613;&#x7406;&#x89E3;&#xFF0C;&#x8BA9;&#x4EBA;&#x8212;&#x670D;&#x81EA;&#x7136;&#xFF0C;&#x540C;&#x65F6;&#x4E5F;&#x8BA9;&#x81EA;&#x5DF1;&#x6210;&#x5C31;&#x611F;&#x6EE1;&#x6EE1;(&#x54C8;&#x54C8;&#xFF0C;&#x8FD9;&#x4E2A;&#x624D;&#x662F;&#x91CD;&#x70B9;)&#x3002;&#x56E0;&#x6B64;&#xFF0C;&#x6211;&#x6574;&#x7406;&#x4E0B;&#x4E09;&#x5E74;&#x6765;&#x81EA;&#x5DF1;&#x4F7F;&#x7528;&#x5230;&#x7684;&#x4E00;&#x4E9B;<strong>CSS&#x5F00;&#x53D1;&#x6280;&#x5DE7;</strong>&#xFF0C;&#x5E0C;&#x671B;&#x80FD;&#x8BA9;&#x4F60;&#x5199;&#x51FA;&#x8033;&#x76EE;&#x4E00;&#x65B0;&#x3001;&#x5BB9;&#x6613;&#x7406;&#x89E3;&#x3001;&#x8212;&#x670D;&#x81EA;&#x7136;&#x7684;&#x4EE3;&#x7801;&#x3002;</p>
<h3 id="&#x76EE;&#x5F55;"><a name="&#x76EE;&#x5F55;" class="anchor-navigation-ex-anchor" href="#&#x76EE;&#x5F55;"><i class="fa fa-link" aria-hidden="true"></i></a>1.1.3. &#x76EE;&#x5F55;</h3>
<p>&#x65E2;&#x7136;&#x5199;&#x6587;&#x7AE0;&#x6709;&#x8FD9;&#x4E48;&#x591A;&#x7684;&#x5199;&#x4F5C;&#x6280;&#x5DE7;&#xFF0C;&#x90A3;&#x4E48;&#x6211;&#x4E5F;&#x9700;&#x8981;&#x5BF9;<strong>CSS&#x5F00;&#x53D1;&#x6280;&#x5DE7;</strong>&#x6574;&#x7406;&#x4E00;&#x4E0B;&#xFF0C;&#x8D77;&#x4E2A;&#x6613;&#x8BB0;&#x7684;&#x540D;&#x5B57;&#x3002;</p>
<ul>
<li><strong>Layout Skill</strong>&#xFF1A;&#x5E03;&#x5C40;&#x6280;&#x5DE7;</li>
<li><strong>Behavior Skill</strong>&#xFF1A;&#x884C;&#x4E3A;&#x6280;&#x5DE7;</li>
<li><strong>Color Skill</strong>&#xFF1A;&#x8272;&#x5F69;&#x6280;&#x5DE7;</li>
<li><strong>Figure Skill</strong>&#xFF1A;&#x56FE;&#x5F62;&#x6280;&#x5DE7;</li>
<li><strong>Component Skill</strong>&#xFF1A;&#x7EC4;&#x4EF6;&#x6280;&#x5DE7;</li>
</ul>
<p>&#x5907;&#x6CE8;</p>
<ul>
<li>&#x4EE3;&#x7801;&#x53EA;&#x4F5C;&#x6F14;&#x793A;&#x7528;&#x9014;&#xFF0C;&#x4E0D;&#x4F1A;&#x8BE6;&#x7EC6;&#x8BF4;&#x660E;&#x8BED;&#x6CD5;</li>
<li>&#x90E8;&#x5206;&#x6280;&#x5DE7;&#x793A;&#x4F8B;&#x4EE3;&#x7801;&#x8FC7;&#x957F;&#xFF0C;&#x4F7F;&#x7528;<code>CodePen</code>&#x8FDB;&#x884C;&#x4FDD;&#x5B58;&#xFF0C;&#x70B9;&#x51FB;<strong>&#x5728;&#x7EBF;&#x6F14;&#x793A;</strong>&#x5373;&#x53EF;&#x67E5;&#x770B;</li>
<li>&#x517C;&#x5BB9;&#x9879;&#x70B9;&#x51FB;&#x94FE;&#x63A5;&#x5373;&#x53EF;&#x67E5;&#x770B;&#x5F53;&#x524D;&#x5C5E;&#x6027;&#x7684;&#x6D4F;&#x89C8;&#x5668;&#x517C;&#x5BB9;&#x6570;&#x636E;&#xFF0C;&#x81EA;&#x884C;&#x6839;&#x636E;&#x9879;&#x76EE;&#x517C;&#x5BB9;&#x9700;&#x6C42;&#x8003;&#x8651;&#x662F;&#x5426;&#x4F7F;&#x7528;</li>
<li>&#x4EE5;&#x4E0B;&#x4EE3;&#x7801;&#x5168;&#x90E8;&#x57FA;&#x4E8E;CSS&#x8FDB;&#x884C;&#x4E66;&#x5199;&#xFF0C;&#x6CA1;&#x6709;&#x4EFB;&#x4F55;JS&#x4EE3;&#x7801;&#xFF0C;&#x6CA1;&#x6709;&#x7279;&#x6B8A;&#x8BF4;&#x660E;&#x7684;&#x60C5;&#x51B5;&#x4E0B;&#x6240;&#x6709;&#x5C5E;&#x6027;&#x548C;&#x65B9;&#x6CD5;&#x90FD;&#x662F;CSS&#x7C7B;&#x578B;</li>
<li>&#x4E00;&#x90E8;&#x5206;&#x6280;&#x5DE7;&#x662F;&#x81EA;&#x5DF1;&#x63A2;&#x8BA8;&#x51FA;&#x6765;&#x7684;&#xFF0C;&#x53E6;&#x4E00;&#x90E8;&#x5206;&#x6280;&#x5DE7;&#x662F;&#x53C2;&#x8003;&#x5404;&#x4F4D;&#x524D;&#x7AEF;&#x5927;&#x795E;&#x4EEC;&#x7684;&#xFF0C;&#x90FD;&#x662F;&#x4E00;&#x4E2A;&#x4E92;&#x76F8;&#x5B66;&#x4E60;&#x7684;&#x8FC7;&#x7A0B;&#xFF0C;&#x5927;&#x5BB6;&#x4E00;&#x8D77;&#x8FDB;&#x6B65;</li>
</ul>
<h3 id="layout-skill"><a name="layout-skill" class="anchor-navigation-ex-anchor" href="#layout-skill"><i class="fa fa-link" aria-hidden="true"></i></a>1.1.4. Layout Skill</h3>
<h5 id="&#x4F7F;&#x7528;vw&#x5B9A;&#x5236;rem&#x81EA;&#x9002;&#x5E94;&#x5E03;&#x5C40;"><a name="&#x4F7F;&#x7528;vw&#x5B9A;&#x5236;rem&#x81EA;&#x9002;&#x5E94;&#x5E03;&#x5C40;" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;vw&#x5B9A;&#x5236;rem&#x81EA;&#x9002;&#x5E94;&#x5E03;&#x5C40;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;vw&#x5B9A;&#x5236;rem&#x81EA;&#x9002;&#x5E94;&#x5E03;&#x5C40;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x79FB;&#x52A8;&#x7AEF;&#x4F7F;&#x7528;<code>rem&#x5E03;&#x5C40;</code>&#x9700;&#x8981;&#x901A;&#x8FC7;JS&#x8BBE;&#x7F6E;&#x4E0D;&#x540C;&#x5C4F;&#x5E55;&#x5BBD;&#x9AD8;&#x6BD4;&#x7684;<code>font-size</code>&#xFF0C;&#x7ED3;&#x5408;<code>vw</code>&#x5355;&#x4F4D;&#x548C;<code>calc()</code>&#x53EF;&#x8131;&#x79BB;JS&#x7684;&#x63A7;&#x5236;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>rem&#x9875;&#x9762;&#x5E03;&#x5C40;</strong>(&#x4E0D;&#x517C;&#x5BB9;&#x4F4E;&#x7248;&#x672C;&#x79FB;&#x52A8;&#x7AEF;&#x7CFB;&#x7EDF;)</li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=vw" target="_blank">vw</a>&#x3001;<a href="https://caniuse.com/#search=calc(" target="_blank">calc()</a>)</li>
</ul>
<pre><code class="lang-css"><span class="hljs-comment">/* &#x57FA;&#x4E8E;UI width=750px DPR=2&#x7684;&#x9875;&#x9762; */</span>
<span class="hljs-selector-tag">html</span> {
    <span class="hljs-attribute">font-size</span>: <span class="hljs-built_in">calc</span>(100vw / 7.5);
}
</code></pre>
<h5 id="&#x4F7F;&#x7528;nth-child&#x9009;&#x62E9;&#x6307;&#x5B9A;&#x5143;&#x7D20;"><a name="&#x4F7F;&#x7528;nth-child&#x9009;&#x62E9;&#x6307;&#x5B9A;&#x5143;&#x7D20;" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;nth-child&#x9009;&#x62E9;&#x6307;&#x5B9A;&#x5143;&#x7D20;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;:nth-child()&#x9009;&#x62E9;&#x6307;&#x5B9A;&#x5143;&#x7D20;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x901A;&#x8FC7;<code>:nth-child()</code>&#x7B5B;&#x9009;&#x6307;&#x5B9A;&#x7684;&#x5143;&#x7D20;&#x8BBE;&#x7F6E;&#x6837;&#x5F0F;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x8868;&#x683C;&#x7740;&#x8272;</strong>&#x3001;<strong>&#x8FB9;&#x754C;&#x5143;&#x7D20;&#x6392;&#x7248;</strong>(&#x9996;&#x5143;&#x7D20;&#x3001;&#x5C3E;&#x5143;&#x7D20;&#x3001;&#x5DE6;&#x53F3;&#x4E24;&#x8FB9;&#x5143;&#x7D20;)</li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=%3Anth-child(" target="_blank">:nth-child()</a>)</li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/voRzNP" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899205" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x4F7F;&#x7528;writing-mode&#x6392;&#x7248;&#x7AD6;&#x6587;"><a name="&#x4F7F;&#x7528;writing-mode&#x6392;&#x7248;&#x7AD6;&#x6587;" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;writing-mode&#x6392;&#x7248;&#x7AD6;&#x6587;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;writing-mode&#x6392;&#x7248;&#x7AD6;&#x6587;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x901A;&#x8FC7;<code>writing-mode</code>&#x8C03;&#x6574;&#x6587;&#x672C;&#x6392;&#x7248;&#x65B9;&#x5411;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x7AD6;&#x884C;&#x6587;&#x5B57;</strong>&#x3001;<strong>&#x6587;&#x8A00;&#x6587;</strong>&#x3001;<strong>&#x8BD7;&#x8BCD;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=writing-mode" target="_blank">writing-mode</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/XvExJO" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899206" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x4F7F;&#x7528;text-align-last&#x5BF9;&#x9F50;&#x4E24;&#x7AEF;&#x6587;&#x672C;"><a name="&#x4F7F;&#x7528;text-align-last&#x5BF9;&#x9F50;&#x4E24;&#x7AEF;&#x6587;&#x672C;" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;text-align-last&#x5BF9;&#x9F50;&#x4E24;&#x7AEF;&#x6587;&#x672C;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;text-align-last&#x5BF9;&#x9F50;&#x4E24;&#x7AEF;&#x6587;&#x672C;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x901A;&#x8FC7;<code>text-align-last:justify</code>&#x8BBE;&#x7F6E;&#x6587;&#x672C;&#x4E24;&#x7AEF;&#x5BF9;&#x9F50;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x672A;&#x77E5;&#x5B57;&#x6570;&#x4E2D;&#x6587;&#x5BF9;&#x9F50;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=text-align-last" target="_blank">text-align-last</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/ZgxZJa" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899207" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x4F7F;&#x7528;not&#x53BB;&#x9664;&#x65E0;&#x7528;&#x5C5E;&#x6027;"><a name="&#x4F7F;&#x7528;not&#x53BB;&#x9664;&#x65E0;&#x7528;&#x5C5E;&#x6027;" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;not&#x53BB;&#x9664;&#x65E0;&#x7528;&#x5C5E;&#x6027;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;:not()&#x53BB;&#x9664;&#x65E0;&#x7528;&#x5C5E;&#x6027;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x901A;&#x8FC7;<code>:not()</code>&#x6392;&#x9664;&#x6307;&#x5B9A;&#x5143;&#x7D20;&#x4E0D;&#x4F7F;&#x7528;&#x8BBE;&#x7F6E;&#x6837;&#x5F0F;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x7B26;&#x53F7;&#x5206;&#x5272;&#x6587;&#x5B57;</strong>&#x3001;<strong>&#x8FB9;&#x754C;&#x5143;&#x7D20;&#x6392;&#x7248;</strong>(&#x9996;&#x5143;&#x7D20;&#x3001;&#x5C3E;&#x5143;&#x7D20;&#x3001;&#x5DE6;&#x53F3;&#x4E24;&#x8FB9;&#x5143;&#x7D20;)</li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=%3Anot(" target="_blank">:not()</a>)</li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/gVeyqr" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899208" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x4F7F;&#x7528;object-fit&#x89C4;&#x5B9A;&#x56FE;&#x50CF;&#x5C3A;&#x5BF8;"><a name="&#x4F7F;&#x7528;object-fit&#x89C4;&#x5B9A;&#x56FE;&#x50CF;&#x5C3A;&#x5BF8;" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;object-fit&#x89C4;&#x5B9A;&#x56FE;&#x50CF;&#x5C3A;&#x5BF8;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;object-fit&#x89C4;&#x5B9A;&#x56FE;&#x50CF;&#x5C3A;&#x5BF8;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x901A;&#x8FC7;<code>object-fit</code>&#x4F7F;&#x56FE;&#x50CF;&#x8131;&#x79BB;<code>background-size</code>&#x7684;&#x7EA6;&#x675F;&#xFF0C;&#x4F7F;&#x7528;<code>&lt;img&gt;</code>&#x6765;&#x6807;&#x8BB0;&#x56FE;&#x50CF;&#x80CC;&#x666F;&#x5C3A;&#x5BF8;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x56FE;&#x7247;&#x5C3A;&#x5BF8;&#x81EA;&#x9002;&#x5E94;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=object-fit" target="_blank">object-fit</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/LwBKLV" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899209" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x4F7F;&#x7528;overflow-x&#x6392;&#x7248;&#x6A2A;&#x5411;&#x5217;&#x8868;"><a name="&#x4F7F;&#x7528;overflow-x&#x6392;&#x7248;&#x6A2A;&#x5411;&#x5217;&#x8868;" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;overflow-x&#x6392;&#x7248;&#x6A2A;&#x5411;&#x5217;&#x8868;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;overflow-x&#x6392;&#x7248;&#x6A2A;&#x5411;&#x5217;&#x8868;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x901A;&#x8FC7;<code>flexbox</code>&#x6216;<code>inline-block</code>&#x7684;&#x5F62;&#x5F0F;&#x6A2A;&#x5411;&#x6392;&#x5217;&#x5143;&#x7D20;&#xFF0C;&#x5BF9;&#x7236;&#x5143;&#x7D20;&#x8BBE;&#x7F6E;<code>overflow-x:auto</code>&#x6A2A;&#x5411;&#x6EDA;&#x52A8;&#x67E5;&#x770B;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x6A2A;&#x5411;&#x6EDA;&#x52A8;&#x5217;&#x8868;</strong>&#x3001;<strong>&#x5143;&#x7D20;&#x8FC7;&#x591A;&#x4F46;&#x4F4D;&#x7F6E;&#x6709;&#x9650;&#x7684;&#x5BFC;&#x822A;&#x680F;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=overflow-x" target="_blank">overflow-x</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/jONqyVd" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899210" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x4F7F;&#x7528;text-overflow&#x63A7;&#x5236;&#x6587;&#x672C;&#x6EA2;&#x51FA;"><a name="&#x4F7F;&#x7528;text-overflow&#x63A7;&#x5236;&#x6587;&#x672C;&#x6EA2;&#x51FA;" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;text-overflow&#x63A7;&#x5236;&#x6587;&#x672C;&#x6EA2;&#x51FA;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;text-overflow&#x63A7;&#x5236;&#x6587;&#x672C;&#x6EA2;&#x51FA;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x901A;&#x8FC7;<code>text-overflow:ellipsis</code>&#x5BF9;&#x6EA2;&#x51FA;&#x7684;&#x6587;&#x672C;&#x5728;&#x672B;&#x7AEF;&#x6DFB;&#x52A0;<code>...</code></li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x5355;&#x884C;&#x6587;&#x5B57;&#x6EA2;&#x51FA;</strong>&#x3001;<strong>&#x591A;&#x884C;&#x6587;&#x5B57;&#x6EA2;&#x51FA;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=text-overflow" target="_blank">text-overflow</a>&#x3001;<a href="https://caniuse.com/#search=line-clamp" target="_blank">line-clamp</a>&#x3001;<a href="https://www.w3school.com.cn/cssref/pr_box-orient.asp" target="_blank">box-orient</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/mdbPmyy" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899211" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x4F7F;&#x7528;transform&#x63CF;&#x7ED8;1px&#x8FB9;&#x6846;"><a name="&#x4F7F;&#x7528;transform&#x63CF;&#x7ED8;1px&#x8FB9;&#x6846;" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;transform&#x63CF;&#x7ED8;1px&#x8FB9;&#x6846;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;transform&#x63CF;&#x7ED8;1px&#x8FB9;&#x6846;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x5206;&#x8FA8;&#x7387;&#x6BD4;&#x8F83;&#x4F4E;&#x7684;&#x5C4F;&#x5E55;&#x4E0B;&#x663E;&#x793A;1px&#x7684;&#x8FB9;&#x6846;&#x4F1A;&#x663E;&#x5F97;&#x6A21;&#x7CCA;&#xFF0C;&#x901A;&#x8FC7;<code>::before</code>&#x6216;<code>::after</code>&#x548C;<code>transform</code>&#x6A21;&#x62DF;&#x7EC6;&#x817B;&#x7684;1px&#x8FB9;&#x6846;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x5BB9;&#x5668;1px&#x8FB9;&#x6846;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=transform" target="_blank">transform</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/YzKqMVO" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899212" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x4F7F;&#x7528;transform&#x7FFB;&#x8F6C;&#x5185;&#x5BB9;"><a name="&#x4F7F;&#x7528;transform&#x7FFB;&#x8F6C;&#x5185;&#x5BB9;" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;transform&#x7FFB;&#x8F6C;&#x5185;&#x5BB9;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;transform&#x7FFB;&#x8F6C;&#x5185;&#x5BB9;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x901A;&#x8FC7;<code>transform:scale3d()</code>&#x5BF9;&#x5185;&#x5BB9;&#x8FDB;&#x884C;&#x7FFB;&#x8F6C;(&#x6C34;&#x5E73;&#x7FFB;&#x8F6C;&#x3001;&#x5782;&#x76F4;&#x7FFB;&#x8F6C;&#x3001;&#x5012;&#x5E8F;&#x7FFB;&#x8F6C;)</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x5185;&#x5BB9;&#x7FFB;&#x8F6C;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=transform" target="_blank">transform</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/NWKNZwO" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899213" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x4F7F;&#x7528;letter-spacing&#x6392;&#x7248;&#x5012;&#x5E8F;&#x6587;&#x672C;"><a name="&#x4F7F;&#x7528;letter-spacing&#x6392;&#x7248;&#x5012;&#x5E8F;&#x6587;&#x672C;" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;letter-spacing&#x6392;&#x7248;&#x5012;&#x5E8F;&#x6587;&#x672C;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;letter-spacing&#x6392;&#x7248;&#x5012;&#x5E8F;&#x6587;&#x672C;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x901A;&#x8FC7;<code>letter-spacing</code>&#x8BBE;&#x7F6E;&#x8D1F;&#x503C;&#x5B57;&#x4F53;&#x95F4;&#x8DDD;&#x5C06;&#x6587;&#x672C;&#x5012;&#x5E8F;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x6587;&#x8A00;&#x6587;</strong>&#x3001;<strong>&#x8BD7;&#x8BCD;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=letter-spacing" target="_blank">letter-spacing</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/zYOBgqB" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899214" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x4F7F;&#x7528;margin-left&#x6392;&#x7248;&#x5DE6;&#x91CD;&#x53F3;&#x8F7B;&#x5217;&#x8868;"><a name="&#x4F7F;&#x7528;margin-left&#x6392;&#x7248;&#x5DE6;&#x91CD;&#x53F3;&#x8F7B;&#x5217;&#x8868;" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;margin-left&#x6392;&#x7248;&#x5DE6;&#x91CD;&#x53F3;&#x8F7B;&#x5217;&#x8868;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;margin-left&#x6392;&#x7248;&#x5DE6;&#x91CD;&#x53F3;&#x8F7B;&#x5217;&#x8868;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x4F7F;&#x7528;<code>flexbox&#x6A2A;&#x5411;&#x5E03;&#x5C40;</code>&#x65F6;&#xFF0C;&#x6700;&#x540E;&#x4E00;&#x4E2A;&#x5143;&#x7D20;&#x901A;&#x8FC7;<code>margin-left:auto</code>&#x5B9E;&#x73B0;&#x5411;&#x53F3;&#x5BF9;&#x9F50;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x53F3;&#x4FA7;&#x5E26;&#x56FE;&#x6807;&#x7684;&#x5BFC;&#x822A;&#x680F;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=margin" target="_blank">margin</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/PoYpROw" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899215" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h3 id="behavior-skill"><a name="behavior-skill" class="anchor-navigation-ex-anchor" href="#behavior-skill"><i class="fa fa-link" aria-hidden="true"></i></a>1.1.5. Behavior Skill</h3>
<h5 id="&#x4F7F;&#x7528;overflow-scrolling&#x652F;&#x6301;&#x5F39;&#x6027;&#x6EDA;&#x52A8;"><a name="&#x4F7F;&#x7528;overflow-scrolling&#x652F;&#x6301;&#x5F39;&#x6027;&#x6EDA;&#x52A8;" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;overflow-scrolling&#x652F;&#x6301;&#x5F39;&#x6027;&#x6EDA;&#x52A8;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;overflow-scrolling&#x652F;&#x6301;&#x5F39;&#x6027;&#x6EDA;&#x52A8;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;iOS&#x9875;&#x9762;<code>&#x975E;body&#x5143;&#x7D20;</code>&#x7684;&#x6EDA;&#x52A8;&#x64CD;&#x4F5C;&#x4F1A;&#x975E;&#x5E38;&#x5361;(Android&#x4E0D;&#x4F1A;&#x51FA;&#x73B0;&#x6B64;&#x60C5;&#x51B5;)&#xFF0C;&#x901A;&#x8FC7;<code>overflow-scrolling:touch</code>&#x8C03;&#x7528;Safari&#x539F;&#x751F;&#x6EDA;&#x52A8;&#x6765;&#x652F;&#x6301;&#x5F39;&#x6027;&#x6EDA;&#x52A8;&#xFF0C;&#x589E;&#x52A0;&#x9875;&#x9762;&#x6EDA;&#x52A8;&#x7684;&#x6D41;&#x7545;&#x5EA6;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>iOS&#x9875;&#x9762;&#x6EDA;&#x52A8;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;iOS&#x81EA;&#x5E26;<code>-webkit-overflow-scrolling</code></li>
</ul>
<pre><code class="lang-css"><span class="hljs-selector-tag">body</span> {
    <span class="hljs-attribute">-webkit-overflow-scrolling</span>: touch;
}
<span class="hljs-selector-class">.elem</span> {
    <span class="hljs-attribute">overflow</span>: auto;
}
</code></pre>
<h5 id="&#x4F7F;&#x7528;transform&#x542F;&#x52A8;gpu&#x786C;&#x4EF6;&#x52A0;&#x901F;"><a name="&#x4F7F;&#x7528;transform&#x542F;&#x52A8;gpu&#x786C;&#x4EF6;&#x52A0;&#x901F;" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;transform&#x542F;&#x52A8;gpu&#x786C;&#x4EF6;&#x52A0;&#x901F;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;transform&#x542F;&#x52A8;GPU&#x786C;&#x4EF6;&#x52A0;&#x901F;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x6709;&#x65F6;&#x6267;&#x884C;&#x52A8;&#x753B;&#x53EF;&#x80FD;&#x4F1A;&#x5BFC;&#x81F4;&#x9875;&#x9762;&#x5361;&#x987F;&#xFF0C;&#x53EF;&#x5728;&#x7279;&#x5B9A;&#x5143;&#x7D20;&#x4E2D;&#x4F7F;&#x7528;&#x786C;&#x4EF6;&#x52A0;&#x901F;&#x6765;&#x907F;&#x514D;&#x8FD9;&#x4E2A;&#x95EE;&#x9898;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x52A8;&#x753B;&#x5143;&#x7D20;</strong>(&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;&#x3001;&#x540C;&#x7EA7;&#x4E2D;&#x8D85;&#x8FC7;6&#x4E2A;&#x4EE5;&#x4E0A;&#x4F7F;&#x7528;&#x52A8;&#x753B;)</li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=transform" target="_blank">transform</a></li>
</ul>
<pre><code class="lang-css"><span class="hljs-selector-class">.elem</span> {
    <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">translate3d</span>(0, 0, 0); <span class="hljs-comment">/* translateZ(0)&#x4EA6;&#x53EF; */</span>
}
</code></pre>
<h5 id="&#x4F7F;&#x7528;attr&#x6293;&#x53D6;data-"><a name="&#x4F7F;&#x7528;attr&#x6293;&#x53D6;data-" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;attr&#x6293;&#x53D6;data-"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;attr()&#x6293;&#x53D6;data-*</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x5728;&#x6807;&#x7B7E;&#x4E0A;&#x81EA;&#x5B9A;&#x4E49;&#x5C5E;&#x6027;<code>data-*</code>&#xFF0C;&#x901A;&#x8FC7;<code>attr()</code>&#x83B7;&#x53D6;&#x5176;&#x5185;&#x5BB9;&#x8D4B;&#x503C;&#x5230;<code>content</code>&#x4E0A;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x63D0;&#x793A;&#x6846;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=data-" target="_blank">data-*</a>&#x3001;<a href="https://caniuse.com/#search=attr(" target="_blank">attr()</a>)</li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/voRdKX" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899216" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x4F7F;&#x7528;valid&#x548C;invalid&#x6821;&#x9A8C;&#x8868;&#x5355;"><a name="&#x4F7F;&#x7528;valid&#x548C;invalid&#x6821;&#x9A8C;&#x8868;&#x5355;" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;valid&#x548C;invalid&#x6821;&#x9A8C;&#x8868;&#x5355;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;:valid&#x548C;:invalid&#x6821;&#x9A8C;&#x8868;&#x5355;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;<code>&lt;input&gt;</code>&#x4F7F;&#x7528;&#x4F2A;&#x7C7B;<code>:valid</code>&#x548C;<code>:invalid</code>&#x914D;&#x5408;<code>pattern</code>&#x6821;&#x9A8C;&#x8868;&#x5355;&#x8F93;&#x5165;&#x7684;&#x5185;&#x5BB9;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x8868;&#x5355;&#x6821;&#x9A8C;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=pattern" target="_blank">pattern</a>&#x3001;<a href="https://caniuse.com/#search=%3Avalid" target="_blank">:valid</a>&#x3001;<a href="https://caniuse.com/#search=%3Ainvalid" target="_blank">:invalid</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/QemxKr" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899218" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x4F7F;&#x7528;pointer-events&#x7981;&#x7528;&#x4E8B;&#x4EF6;&#x89E6;&#x53D1;"><a name="&#x4F7F;&#x7528;pointer-events&#x7981;&#x7528;&#x4E8B;&#x4EF6;&#x89E6;&#x53D1;" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;pointer-events&#x7981;&#x7528;&#x4E8B;&#x4EF6;&#x89E6;&#x53D1;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;pointer-events&#x7981;&#x7528;&#x4E8B;&#x4EF6;&#x89E6;&#x53D1;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x901A;&#x8FC7;<code>pointer-events:none</code>&#x7981;&#x7528;&#x4E8B;&#x4EF6;&#x89E6;&#x53D1;(&#x9ED8;&#x8BA4;&#x4E8B;&#x4EF6;&#x3001;&#x5192;&#x6CE1;&#x4E8B;&#x4EF6;&#x3001;&#x9F20;&#x6807;&#x4E8B;&#x4EF6;&#x3001;&#x952E;&#x76D8;&#x4E8B;&#x4EF6;&#x7B49;)&#xFF0C;&#x76F8;&#x5F53;&#x4E8E;<code>&lt;button&gt;</code>&#x7684;<code>disabled</code></li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x9650;&#x65F6;&#x70B9;&#x51FB;&#x6309;&#x94AE;</strong>(&#x53D1;&#x9001;&#x9A8C;&#x8BC1;&#x7801;&#x5012;&#x8BA1;&#x65F6;)&#x3001;<strong>&#x4E8B;&#x4EF6;&#x5192;&#x6CE1;&#x7981;&#x7528;</strong>(&#x591A;&#x4E2A;&#x5143;&#x7D20;&#x91CD;&#x53E0;&#x4E14;&#x81EA;&#x5E26;&#x4E8B;&#x4EF6;&#x3001;a&#x6807;&#x7B7E;&#x8DF3;&#x8F6C;)</li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=pointer-events" target="_blank">pointer-events</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/dxmrLj" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899219" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x4F7F;&#x7528;&#x6216;&#x7F8E;&#x5316;&#x9009;&#x9879;&#x6846;"><a name="&#x4F7F;&#x7528;&#x6216;&#x7F8E;&#x5316;&#x9009;&#x9879;&#x6846;" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;&#x6216;&#x7F8E;&#x5316;&#x9009;&#x9879;&#x6846;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;+&#x6216;~&#x7F8E;&#x5316;&#x9009;&#x9879;&#x6846;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;<code>&lt;label&gt;</code>&#x4F7F;&#x7528;<code>+</code>&#x6216;<code>~</code>&#x914D;&#x5408;<code>for</code>&#x7ED1;&#x5B9A;<code>radio</code>&#x6216;<code>checkbox</code>&#x7684;&#x9009;&#x62E9;&#x884C;&#x4E3A;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x9009;&#x9879;&#x6846;&#x7F8E;&#x5316;</strong>&#x3001;<strong>&#x9009;&#x4E2D;&#x9879;&#x589E;&#x52A0;&#x9009;&#x4E2D;&#x6837;&#x5F0F;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=+" target="_blank">+</a>&#x3001;<a href="https://caniuse.com/#search=~" target="_blank">~</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/rXdbgZ" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899220" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x4F7F;&#x7528;focus-within&#x5206;&#x53D1;&#x5192;&#x6CE1;&#x54CD;&#x5E94;"><a name="&#x4F7F;&#x7528;focus-within&#x5206;&#x53D1;&#x5192;&#x6CE1;&#x54CD;&#x5E94;" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;focus-within&#x5206;&#x53D1;&#x5192;&#x6CE1;&#x54CD;&#x5E94;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;:focus-within&#x5206;&#x53D1;&#x5192;&#x6CE1;&#x54CD;&#x5E94;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x8868;&#x5355;&#x63A7;&#x4EF6;&#x89E6;&#x53D1;<code>focus</code>&#x548C;<code>blur</code>&#x4E8B;&#x4EF6;&#x540E;&#x5F80;&#x7236;&#x5143;&#x7D20;&#x8FDB;&#x884C;&#x5192;&#x6CE1;&#xFF0C;&#x5728;&#x7236;&#x5143;&#x7D20;&#x4E0A;&#x901A;&#x8FC7;<code>:focus-within</code>&#x6355;&#x83B7;&#x8BE5;&#x5192;&#x6CE1;&#x4E8B;&#x4EF6;&#x6765;&#x8BBE;&#x7F6E;&#x6837;&#x5F0F;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x767B;&#x5F55;&#x6CE8;&#x518C;&#x5F39;&#x6846;</strong>&#x3001;<strong>&#x8868;&#x5355;&#x6821;&#x9A8C;</strong>&#x3001;<a href="https://codepen.io/dannievinther/pen/NvZjvz" target="_blank"><strong>&#x79BB;&#x5C4F;&#x5BFC;&#x822A;</strong></a>&#x70B9;&#x51FB;&#x9884;&#x89C8;&#x3001;<a href="https://codepen.io/Chokcoco/pen/RJEpaP" target="_blank"><strong>&#x5BFC;&#x822A;&#x5207;&#x6362;</strong></a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://www.caniuse.com/#search=%3Afocus-within" target="_blank">:focus-within</a>&#x3001;<a href="https://www.caniuse.com/#search=%3Aplaceholder-shown" target="_blank">:placeholder-shown</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/BaBjaBP" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899221" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x4F7F;&#x7528;hover&#x63CF;&#x7ED8;&#x9F20;&#x6807;&#x8DDF;&#x968F;"><a name="&#x4F7F;&#x7528;hover&#x63CF;&#x7ED8;&#x9F20;&#x6807;&#x8DDF;&#x968F;" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;hover&#x63CF;&#x7ED8;&#x9F20;&#x6807;&#x8DDF;&#x968F;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;:hover&#x63CF;&#x7ED8;&#x9F20;&#x6807;&#x8DDF;&#x968F;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x5C06;&#x6574;&#x4E2A;&#x9875;&#x9762;&#x7B49;&#x6BD4;&#x5212;&#x5206;&#x6210;&#x5C0F;&#x7684;&#x5355;&#x5143;&#x683C;&#xFF0C;&#x6BCF;&#x4E2A;&#x5355;&#x5143;&#x683C;&#x76D1;&#x542C;<code>:hover</code>&#xFF0C;&#x901A;&#x8FC7;<code>:hover</code>&#x89E6;&#x53D1;&#x5355;&#x5143;&#x683C;&#x7684;&#x6837;&#x5F0F;&#x53D8;&#x5316;&#x6765;&#x63CF;&#x7ED8;&#x9F20;&#x6807;&#x8FD0;&#x52A8;&#x8F68;&#x8FF9;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x9F20;&#x6807;&#x8DDF;&#x968F;&#x8F68;&#x8FF9;</strong>&#x3001;<a href="https://codepen.io/YusukeNakaya/pen/vvEqVx" target="_blank"><strong>&#x6C34;&#x6CE2;&#x7EB9;</strong></a>&#x70B9;&#x51FB;&#x9884;&#x89C8;&#x3001;<a href="https://codepen.io/Chokcoco/pen/zyyYqN" target="_blank"><strong>&#x602A;&#x5708;</strong></a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://www.caniuse.com/#search=%3Ahover" target="_blank">:hover</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/wvwMLJY" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899222" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x4F7F;&#x7528;max-height&#x5207;&#x6362;&#x81EA;&#x52A8;&#x9AD8;&#x5EA6;"><a name="&#x4F7F;&#x7528;max-height&#x5207;&#x6362;&#x81EA;&#x52A8;&#x9AD8;&#x5EA6;" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;max-height&#x5207;&#x6362;&#x81EA;&#x52A8;&#x9AD8;&#x5EA6;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;max-height&#x5207;&#x6362;&#x81EA;&#x52A8;&#x9AD8;&#x5EA6;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x901A;&#x8FC7;<code>max-height</code>&#x5B9A;&#x4E49;&#x6536;&#x8D77;&#x7684;&#x6700;&#x5C0F;&#x9AD8;&#x5EA6;&#x548C;&#x5C55;&#x5F00;&#x7684;&#x6700;&#x5927;&#x9AD8;&#x5EA6;&#xFF0C;&#x8BBE;&#x7F6E;&#x4E24;&#x8005;&#x95F4;&#x7684;&#x8FC7;&#x6E21;&#x5207;&#x6362;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x9690;&#x85CF;&#x5F0F;&#x5B50;&#x5BFC;&#x822A;&#x680F;</strong>&#x3001;<strong>&#x60AC;&#x6D6E;&#x5F0F;&#x6298;&#x53E0;&#x9762;&#x677F;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=max-height" target="_blank">max-height</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/NQYJpm" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899223" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x4F7F;&#x7528;transform&#x6A21;&#x62DF;&#x89C6;&#x5DEE;&#x6EDA;&#x52A8;"><a name="&#x4F7F;&#x7528;transform&#x6A21;&#x62DF;&#x89C6;&#x5DEE;&#x6EDA;&#x52A8;" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;transform&#x6A21;&#x62DF;&#x89C6;&#x5DEE;&#x6EDA;&#x52A8;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;transform&#x6A21;&#x62DF;&#x89C6;&#x5DEE;&#x6EDA;&#x52A8;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x901A;&#x8FC7;<code>background-attachment:fixed</code>&#x6216;<code>transform</code>&#x8BA9;&#x591A;&#x5C42;&#x80CC;&#x666F;&#x4EE5;&#x4E0D;&#x540C;&#x7684;&#x901F;&#x5EA6;&#x79FB;&#x52A8;&#xFF0C;&#x5F62;&#x6210;&#x7ACB;&#x4F53;&#x7684;&#x8FD0;&#x52A8;&#x6548;&#x679C;</li>
<li>&#x573A;&#x666F;&#xFF1A;<a href="https://codepen.io/Chokcoco/pen/JBaQoY" target="_blank"><strong>&#x9875;&#x9762;&#x6EDA;&#x52A8;</strong></a>&#x70B9;&#x51FB;&#x9884;&#x89C8;&#x3001;<a href="https://codepen.io/Chokcoco/pen/XBgBBp" target="_blank"><strong>&#x89C6;&#x5DEE;&#x6EDA;&#x52A8;&#x6587;&#x5B57;&#x9634;&#x5F71;</strong></a>&#x70B9;&#x51FB;&#x9884;&#x89C8;&#x3001;<a href="https://codepen.io/Chokcoco/pen/PBXwdX" target="_blank"><strong>&#x89C6;&#x5DEE;&#x6EDA;&#x52A8;&#x6587;&#x5B57;&#x865A;&#x5F71;</strong></a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://www.caniuse.com/#search=background-attachment" target="_blank">background-attachment</a>&#x3001;<a href="https://www.caniuse.com/#search=transform" target="_blank">transform</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/MWgaBoK" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899224" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x4F7F;&#x7528;animation-delay&#x4FDD;&#x7559;&#x52A8;&#x753B;&#x8D77;&#x59CB;&#x5E27;"><a name="&#x4F7F;&#x7528;animation-delay&#x4FDD;&#x7559;&#x52A8;&#x753B;&#x8D77;&#x59CB;&#x5E27;" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;animation-delay&#x4FDD;&#x7559;&#x52A8;&#x753B;&#x8D77;&#x59CB;&#x5E27;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;animation-delay&#x4FDD;&#x7559;&#x52A8;&#x753B;&#x8D77;&#x59CB;&#x5E27;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x901A;&#x8FC7;<code>transform-delay</code>&#x6216;<code>animation-delay</code>&#x8BBE;&#x7F6E;&#x8D1F;&#x503C;&#x65F6;&#x5EF6;&#x4FDD;&#x7559;&#x52A8;&#x753B;&#x8D77;&#x59CB;&#x5E27;&#xFF0C;&#x8BA9;&#x52A8;&#x753B;&#x8FDB;&#x5165;&#x9875;&#x9762;&#x4E0D;&#x7528;&#x7B49;&#x5F85;&#x5373;&#x53EF;&#x8FD0;&#x884C;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x5F00;&#x573A;&#x52A8;&#x753B;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://www.caniuse.com/#search=transform" target="_blank">transform</a>&#x3001;<a href="https://www.caniuse.com/#search=animation" target="_blank">animation</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/WNexVoB" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899225" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x4F7F;&#x7528;resize&#x62C9;&#x4F38;&#x5206;&#x680F;"><a name="&#x4F7F;&#x7528;resize&#x62C9;&#x4F38;&#x5206;&#x680F;" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;resize&#x62C9;&#x4F38;&#x5206;&#x680F;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;resize&#x62C9;&#x4F38;&#x5206;&#x680F;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x901A;&#x8FC7;<code>resize</code>&#x8BBE;&#x7F6E;&#x6A2A;&#x5411;&#x81EA;&#x7531;&#x62C9;&#x4F38;&#x6765;&#x8C03;&#x6574;&#x76EE;&#x6807;&#x5143;&#x7D20;&#x7684;&#x5BBD;&#x5EA6;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x5BCC;&#x6587;&#x672C;&#x7F16;&#x8F91;&#x5668;</strong>&#x3001;<strong>&#x5206;&#x680F;&#x9605;&#x8BFB;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=resize" target="_blank">resize</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/JjPEdWO" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899226" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h3 id="color-skill"><a name="color-skill" class="anchor-navigation-ex-anchor" href="#color-skill"><i class="fa fa-link" aria-hidden="true"></i></a>1.1.6. Color Skill</h3>
<h5 id="&#x4F7F;&#x7528;color&#x6539;&#x53D8;&#x8FB9;&#x6846;&#x989C;&#x8272;"><a name="&#x4F7F;&#x7528;color&#x6539;&#x53D8;&#x8FB9;&#x6846;&#x989C;&#x8272;" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;color&#x6539;&#x53D8;&#x8FB9;&#x6846;&#x989C;&#x8272;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;color&#x6539;&#x53D8;&#x8FB9;&#x6846;&#x989C;&#x8272;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;<code>border</code>&#x6CA1;&#x6709;&#x5B9A;&#x4E49;<code>border-color</code>&#x65F6;&#xFF0C;&#x8BBE;&#x7F6E;<code>color</code>&#x540E;&#xFF0C;<code>border-color</code>&#x4F1A;&#x88AB;&#x5B9A;&#x4E49;&#x6210;<code>color</code></li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x8FB9;&#x6846;&#x989C;&#x8272;&#x4E0E;&#x6587;&#x5B57;&#x989C;&#x8272;&#x76F8;&#x540C;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=color" target="_blank">color</a></li>
</ul>
<pre><code class="lang-css"><span class="hljs-selector-class">.elem</span> {
    <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid;
    <span class="hljs-attribute">color</span>: <span class="hljs-number">#f66</span>;
}
</code></pre>
<p><img src="https://segmentfault.com/img/remote/1460000020899227" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x4F7F;&#x7528;filter&#x5F00;&#x542F;&#x60BC;&#x5FF5;&#x6A21;&#x5F0F;"><a name="&#x4F7F;&#x7528;filter&#x5F00;&#x542F;&#x60BC;&#x5FF5;&#x6A21;&#x5F0F;" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;filter&#x5F00;&#x542F;&#x60BC;&#x5FF5;&#x6A21;&#x5F0F;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;filter&#x5F00;&#x542F;&#x60BC;&#x5FF5;&#x6A21;&#x5F0F;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x901A;&#x8FC7;<code>filter:grayscale()</code>&#x8BBE;&#x7F6E;&#x7070;&#x5EA6;&#x6A21;&#x5F0F;&#x6765;&#x60BC;&#x5FF5;&#x67D0;&#x4F4D;&#x53BB;&#x4E16;&#x7684;&#x4EC1;&#x5144;&#x6216;&#x60BC;&#x5FF5;&#x56E0;&#x707E;&#x96BE;&#x800C;&#x53BB;&#x4E16;&#x7684;&#x4EBA;&#x4EEC;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x7F51;&#x7AD9;&#x60BC;&#x5FF5;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=filter" target="_blank">filter</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/vYBKqwe" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899228" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x4F7F;&#x7528;selection&#x6539;&#x53D8;&#x6587;&#x672C;&#x9009;&#x62E9;&#x989C;&#x8272;"><a name="&#x4F7F;&#x7528;selection&#x6539;&#x53D8;&#x6587;&#x672C;&#x9009;&#x62E9;&#x989C;&#x8272;" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;selection&#x6539;&#x53D8;&#x6587;&#x672C;&#x9009;&#x62E9;&#x989C;&#x8272;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;::selection&#x6539;&#x53D8;&#x6587;&#x672C;&#x9009;&#x62E9;&#x989C;&#x8272;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x901A;&#x8FC7;<code>::selection</code>&#x6839;&#x636E;&#x4E3B;&#x9898;&#x989C;&#x8272;&#x81EA;&#x5B9A;&#x4E49;&#x6587;&#x672C;&#x9009;&#x62E9;&#x989C;&#x8272;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x4E3B;&#x9898;&#x5316;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=%3A%3Aselection" target="_blank">::selection</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/jONrjXX" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899229" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x4F7F;&#x7528;linear-gradient&#x63A7;&#x5236;&#x80CC;&#x666F;&#x6E10;&#x53D8;"><a name="&#x4F7F;&#x7528;linear-gradient&#x63A7;&#x5236;&#x80CC;&#x666F;&#x6E10;&#x53D8;" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;linear-gradient&#x63A7;&#x5236;&#x80CC;&#x666F;&#x6E10;&#x53D8;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;linear-gradient&#x63A7;&#x5236;&#x80CC;&#x666F;&#x6E10;&#x53D8;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x901A;&#x8FC7;<code>linear-gradient</code>&#x8BBE;&#x7F6E;&#x80CC;&#x666F;&#x6E10;&#x53D8;&#x8272;&#x5E76;&#x653E;&#x5927;&#x80CC;&#x666F;&#x5C3A;&#x5BF8;&#xFF0C;&#x6DFB;&#x52A0;&#x80CC;&#x666F;&#x79FB;&#x52A8;&#x6548;&#x679C;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x4E3B;&#x9898;&#x5316;</strong>&#x3001;<strong>&#x5F69;&#x8679;&#x80CC;&#x666F;&#x5899;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=gradient" target="_blank">gradient</a>&#x3001;<a href="https://www.caniuse.com/#search=animation" target="_blank">animation</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/oNvbRwN" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899230" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x4F7F;&#x7528;linear-gradient&#x63A7;&#x5236;&#x6587;&#x672C;&#x6E10;&#x53D8;"><a name="&#x4F7F;&#x7528;linear-gradient&#x63A7;&#x5236;&#x6587;&#x672C;&#x6E10;&#x53D8;" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;linear-gradient&#x63A7;&#x5236;&#x6587;&#x672C;&#x6E10;&#x53D8;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;linear-gradient&#x63A7;&#x5236;&#x6587;&#x672C;&#x6E10;&#x53D8;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x901A;&#x8FC7;<code>linear-gradient</code>&#x8BBE;&#x7F6E;&#x80CC;&#x666F;&#x6E10;&#x53D8;&#x8272;&#xFF0C;&#x914D;&#x5408;<code>background-clip:text</code>&#x5BF9;&#x80CC;&#x666F;&#x8FDB;&#x884C;&#x6587;&#x672C;&#x88C1;&#x526A;&#xFF0C;&#x6DFB;&#x52A0;&#x6EE4;&#x955C;&#x52A8;&#x753B;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x4E3B;&#x9898;&#x5316;</strong>&#x3001;<strong>&#x7279;&#x8272;&#x6807;&#x9898;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=gradient" target="_blank">gradient</a>&#x3001;<a href="https://www.caniuse.com/#search=background-clip" target="_blank">background-clip</a>&#x3001;<a href="https://caniuse.com/#search=filter" target="_blank">filter</a>&#x3001;<a href="https://www.caniuse.com/#search=animation" target="_blank">animation</a>&#x3001;<a href="https://www.caniuse.com/#search=text-fill-color" target="_blank">text-fill-color</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/pozgQVo" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899231" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x4F7F;&#x7528;caret-color&#x6539;&#x53D8;&#x5149;&#x6807;&#x989C;&#x8272;"><a name="&#x4F7F;&#x7528;caret-color&#x6539;&#x53D8;&#x5149;&#x6807;&#x989C;&#x8272;" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;caret-color&#x6539;&#x53D8;&#x5149;&#x6807;&#x989C;&#x8272;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;caret-color&#x6539;&#x53D8;&#x5149;&#x6807;&#x989C;&#x8272;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x901A;&#x8FC7;<code>caret-color</code>&#x6839;&#x636E;&#x4E3B;&#x9898;&#x989C;&#x8272;&#x81EA;&#x5B9A;&#x4E49;&#x5149;&#x6807;&#x989C;&#x8272;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x4E3B;&#x9898;&#x5316;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=caret-color" target="_blank">caret-color</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/QemxKr" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899232" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x4F7F;&#x7528;scrollbar&#x6539;&#x53D8;&#x6EDA;&#x52A8;&#x6761;&#x6837;&#x5F0F;"><a name="&#x4F7F;&#x7528;scrollbar&#x6539;&#x53D8;&#x6EDA;&#x52A8;&#x6761;&#x6837;&#x5F0F;" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;scrollbar&#x6539;&#x53D8;&#x6EDA;&#x52A8;&#x6761;&#x6837;&#x5F0F;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;::scrollbar&#x6539;&#x53D8;&#x6EDA;&#x52A8;&#x6761;&#x6837;&#x5F0F;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x901A;&#x8FC7;<code>scrollbar</code>&#x7684;<code>scrollbar-track</code>&#x548C;<code>scrollbar-thumb</code>&#x7B49;&#x5C5E;&#x6027;&#x6765;&#x81EA;&#x5B9A;&#x4E49;&#x6EDA;&#x52A8;&#x6761;&#x6837;&#x5F0F;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x4E3B;&#x9898;&#x5316;</strong>&#x3001;<strong>&#x9875;&#x9762;&#x6EDA;&#x52A8;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://www.caniuse.com/#search=scrollbar" target="_blank">::scrollbar</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/ExYPMog" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899233" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x4F7F;&#x7528;filter&#x6A21;&#x62DF;instagram&#x6EE4;&#x955C;"><a name="&#x4F7F;&#x7528;filter&#x6A21;&#x62DF;instagram&#x6EE4;&#x955C;" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;filter&#x6A21;&#x62DF;instagram&#x6EE4;&#x955C;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;filter&#x6A21;&#x62DF;Instagram&#x6EE4;&#x955C;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x901A;&#x8FC7;<code>filter</code>&#x7684;&#x6EE4;&#x955C;&#x7EC4;&#x5408;&#x8D77;&#x6765;&#x6A21;&#x62DF;<code>Instagram&#x6EE4;&#x955C;</code></li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x56FE;&#x7247;&#x6EE4;&#x955C;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=filter" target="_blank">filter</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/NWKbVNQ" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;&#x3001;<a href="https://github.com/una/CSSgram/blob/master/README-CN.md" target="_blank">css-gram</a></li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899234" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h3 id="figure-skill"><a name="figure-skill" class="anchor-navigation-ex-anchor" href="#figure-skill"><i class="fa fa-link" aria-hidden="true"></i></a>1.1.7. Figure Skill</h3>
<h5 id="&#x4F7F;&#x7528;div&#x63CF;&#x7ED8;&#x5404;&#x79CD;&#x56FE;&#x5F62;"><a name="&#x4F7F;&#x7528;div&#x63CF;&#x7ED8;&#x5404;&#x79CD;&#x56FE;&#x5F62;" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;div&#x63CF;&#x7ED8;&#x5404;&#x79CD;&#x56FE;&#x5F62;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;div&#x63CF;&#x7ED8;&#x5404;&#x79CD;&#x56FE;&#x5F62;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;<code>&lt;div&gt;</code>&#x914D;&#x5408;&#x5176;&#x4F2A;&#x5143;&#x7D20;(<code>::before</code>&#x3001;<code>::after</code>)&#x901A;&#x8FC7;<code>clip</code>&#x3001;<code>transform</code>&#x7B49;&#x65B9;&#x5F0F;&#x7ED8;&#x5236;&#x5404;&#x79CD;&#x56FE;&#x5F62;</li>
<li>&#x573A;&#x666F;&#xFF1A;&#x5404;&#x79CD;&#x56FE;&#x5F62;&#x5BB9;&#x5668;</li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=clip" target="_blank">clip</a>&#x3001;<a href="https://caniuse.com/#search=transform" target="_blank">transform</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://css-tricks.com/the-shapes-of-css/" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a></li>
</ul>
<h5 id="&#x4F7F;&#x7528;mask&#x96D5;&#x523B;&#x9542;&#x7A7A;&#x80CC;&#x666F;"><a name="&#x4F7F;&#x7528;mask&#x96D5;&#x523B;&#x9542;&#x7A7A;&#x80CC;&#x666F;" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;mask&#x96D5;&#x523B;&#x9542;&#x7A7A;&#x80CC;&#x666F;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;mask&#x96D5;&#x523B;&#x9542;&#x7A7A;&#x80CC;&#x666F;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x901A;&#x8FC7;<code>mask</code>&#x4E3A;&#x56FE;&#x50CF;&#x80CC;&#x666F;&#x751F;&#x6210;&#x8499;&#x5C42;&#x63D0;&#x4F9B;&#x906E;&#x7F69;&#x6548;&#x679C;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x9AD8;&#x65AF;&#x6A21;&#x7CCA;&#x8499;&#x5C42;</strong>&#x3001;<a href="https://codepen.io/HelKyle/pen/XxZPmY/" target="_blank"><strong>&#x7968;&#x52B5;</strong>(&#x7535;&#x5F71;&#x7968;&#x3001;&#x8D2D;&#x7269;&#x5361;)</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;&#x3001;<a href="https://codepen.io/banik/pen/aRpvdW" target="_blank"><strong>&#x906E;&#x7F69;&#x52A8;&#x753B;</strong></a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://www.caniuse.com/#search=mask" target="_blank">mask</a>&#x3001;<a href="https://caniuse.com/#search=perspective" target="_blank">perspective</a>&#x3001;<a href="https://caniuse.com/#search=transform-style" target="_blank">transform-style</a>&#x3001;<a href="https://www.caniuse.com/#search=animation" target="_blank">animation</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/xxKZdZN" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899235" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x4F7F;&#x7528;linear-gradient&#x63CF;&#x7ED8;&#x6CE2;&#x6D6A;&#x7EBF;"><a name="&#x4F7F;&#x7528;linear-gradient&#x63CF;&#x7ED8;&#x6CE2;&#x6D6A;&#x7EBF;" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;linear-gradient&#x63CF;&#x7ED8;&#x6CE2;&#x6D6A;&#x7EBF;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;linear-gradient&#x63CF;&#x7ED8;&#x6CE2;&#x6D6A;&#x7EBF;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x901A;&#x8FC7;<code>linear-gradient</code>&#x7ED8;&#x5236;&#x6CE2;&#x6D6A;&#x7EBF;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x6587;&#x5B57;&#x5F3A;&#x5316;&#x663E;&#x793A;</strong>&#x3001;<strong>&#x6587;&#x5B57;&#x4E0B;&#x5212;&#x7EBF;</strong>&#x3001;<strong>&#x5185;&#x5BB9;&#x5206;&#x5272;&#x7EBF;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=gradient" target="_blank">gradient</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/EqEzwq" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899236" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x4F7F;&#x7528;linear-gradient&#x63CF;&#x7ED8;&#x5F69;&#x5E26;"><a name="&#x4F7F;&#x7528;linear-gradient&#x63CF;&#x7ED8;&#x5F69;&#x5E26;" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;linear-gradient&#x63CF;&#x7ED8;&#x5F69;&#x5E26;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;linear-gradient&#x63CF;&#x7ED8;&#x5F69;&#x5E26;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x901A;&#x8FC7;<code>linear-gradient</code>&#x7ED8;&#x5236;&#x95F4;&#x65AD;&#x989C;&#x8272;&#x7684;&#x5F69;&#x5E26;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x4E3B;&#x9898;&#x5316;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=gradient" target="_blank">gradient</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/bGbeXZG" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899237" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x4F7F;&#x7528;conic-gradient&#x63CF;&#x7ED8;&#x997C;&#x56FE;"><a name="&#x4F7F;&#x7528;conic-gradient&#x63CF;&#x7ED8;&#x997C;&#x56FE;" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;conic-gradient&#x63CF;&#x7ED8;&#x997C;&#x56FE;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;conic-gradient&#x63CF;&#x7ED8;&#x997C;&#x56FE;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x901A;&#x8FC7;<code>conic-gradient</code>&#x7ED8;&#x5236;&#x591A;&#x79CD;&#x8272;&#x5F69;&#x7684;&#x997C;&#x56FE;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x9879;&#x5360;&#x6BD4;&#x997C;&#x56FE;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=gradient" target="_blank">gradient</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/XWrjrgE" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899238" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x4F7F;&#x7528;linear-gradient&#x63CF;&#x7ED8;&#x65B9;&#x683C;&#x80CC;&#x666F;"><a name="&#x4F7F;&#x7528;linear-gradient&#x63CF;&#x7ED8;&#x65B9;&#x683C;&#x80CC;&#x666F;" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;linear-gradient&#x63CF;&#x7ED8;&#x65B9;&#x683C;&#x80CC;&#x666F;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;linear-gradient&#x63CF;&#x7ED8;&#x65B9;&#x683C;&#x80CC;&#x666F;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x4F7F;&#x7528;<code>linear-gradient</code>&#x7ED8;&#x5236;&#x95F4;&#x65AD;&#x989C;&#x8272;&#x7684;&#x5F69;&#x5E26;&#x8FDB;&#x884C;&#x4EA4;&#x4E92;&#x751F;&#x6210;&#x65B9;&#x683C;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x683C;&#x5B50;&#x80CC;&#x666F;</strong>&#x3001;<strong>&#x5360;&#x4F4D;&#x56FE;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=gradient" target="_blank">gradient</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/RwboXoV" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899239" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x4F7F;&#x7528;box-shadow&#x63CF;&#x7ED8;&#x5355;&#x4FA7;&#x6295;&#x5F71;"><a name="&#x4F7F;&#x7528;box-shadow&#x63CF;&#x7ED8;&#x5355;&#x4FA7;&#x6295;&#x5F71;" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;box-shadow&#x63CF;&#x7ED8;&#x5355;&#x4FA7;&#x6295;&#x5F71;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;box-shadow&#x63CF;&#x7ED8;&#x5355;&#x4FA7;&#x6295;&#x5F71;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x901A;&#x8FC7;<code>box-shadow</code>&#x751F;&#x6210;&#x6295;&#x5F71;&#xFF0C;&#x4E14;&#x6A21;&#x7CCA;&#x534A;&#x5F84;&#x548C;&#x8D1F;&#x7684;&#x6269;&#x5F20;&#x534A;&#x5F84;&#x4E00;&#x81F4;&#xFF0C;&#x4F7F;&#x6295;&#x5F71;&#x504F;&#x5411;&#x4E00;&#x4FA7;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x5BB9;&#x5668;&#x6295;&#x5F71;</strong>&#x3001;<a href="https://codepen.io/Chokcoco/pen/WaBYZL" target="_blank"><strong>&#x80CC;&#x666F;&#x8865;&#x95F4;&#x52A8;&#x753B;1</strong></a>&#x70B9;&#x51FB;&#x9884;&#x89C8;&#x3001;<a href="https://codepen.io/davidkpiano/pen/LVzxPV" target="_blank"><strong>&#x80CC;&#x666F;&#x8865;&#x95F4;&#x52A8;&#x753B;2</strong></a>&#x70B9;&#x51FB;&#x9884;&#x89C8;&#x3001;<a href="https://codepen.io/Chokcoco/pen/LgdRKE" target="_blank"><strong>&#x7ACB;&#x4F53;&#x6295;&#x5F71;</strong></a>&#x70B9;&#x51FB;&#x9884;&#x89C8;&#x3001;<a href="https://codepen.io/Chokcoco/pen/JmgNNa" target="_blank"><strong>&#x6587;&#x5B57;&#x7ACB;&#x4F53;&#x6295;&#x5F71;</strong></a>&#x70B9;&#x51FB;&#x9884;&#x89C8;&#x3001;<a href="https://codepen.io/Chokcoco/pen/XxQJEB" target="_blank"><strong>&#x6587;&#x5B57;&#x6E10;&#x53D8;&#x7ACB;&#x4F53;&#x6295;&#x5F71;</strong></a>&#x70B9;&#x51FB;&#x9884;&#x89C8;&#x3001;<a href="https://codepen.io/Chokcoco/pen/qJvVGy" target="_blank"><strong>&#x957F;&#x6295;&#x5F71;</strong></a>&#x70B9;&#x51FB;&#x9884;&#x89C8;&#x3001;<a href="https://codepen.io/Chokcoco/pen/WaLdwX" target="_blank"><strong>&#x9713;&#x8679;&#x706F;</strong></a>&#x70B9;&#x51FB;&#x9884;&#x89C8;&#x3001;<a href="https://codepen.io/Chokcoco/pen/ReOgvq" target="_blank"><strong>&#x706F;&#x5149;&#x9634;&#x5F71;</strong></a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=box-shadow" target="_blank">box-shadow</a>&#x3001;<a href="https://caniuse.com/#search=filter" target="_blank">filter</a>&#x3001;<a href="https://caniuse.com/#search=text-shadow" target="_blank">text-shadow</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/BaBLqYo" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899240" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x4F7F;&#x7528;filter&#x63CF;&#x7ED8;&#x5934;&#x50CF;&#x5F69;&#x8272;&#x9634;&#x5F71;"><a name="&#x4F7F;&#x7528;filter&#x63CF;&#x7ED8;&#x5934;&#x50CF;&#x5F69;&#x8272;&#x9634;&#x5F71;" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;filter&#x63CF;&#x7ED8;&#x5934;&#x50CF;&#x5F69;&#x8272;&#x9634;&#x5F71;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;filter&#x63CF;&#x7ED8;&#x5934;&#x50CF;&#x5F69;&#x8272;&#x9634;&#x5F71;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x901A;&#x8FC7;<code>filter:blur() brightness() opacity()</code>&#x6A21;&#x62DF;&#x9634;&#x5F71;&#x6548;&#x679C;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x5934;&#x50CF;&#x9634;&#x5F71;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=filter" target="_blank">filter</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/GRKjYap" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899241" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x4F7F;&#x7528;box-shadow&#x88C1;&#x526A;&#x56FE;&#x50CF;"><a name="&#x4F7F;&#x7528;box-shadow&#x88C1;&#x526A;&#x56FE;&#x50CF;" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;box-shadow&#x88C1;&#x526A;&#x56FE;&#x50CF;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;box-shadow&#x88C1;&#x526A;&#x56FE;&#x50CF;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x901A;&#x8FC7;<code>box-shadow</code>&#x6A21;&#x62DF;&#x8499;&#x5C42;&#x5B9E;&#x73B0;&#x4E2D;&#x95F4;&#x9542;&#x7A7A;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x56FE;&#x7247;&#x88C1;&#x526A;</strong>&#x3001;<strong>&#x65B0;&#x624B;&#x5F15;&#x5BFC;</strong>&#x3001;<strong>&#x80CC;&#x666F;&#x9542;&#x7A7A;</strong>&#x3001;<strong>&#x6295;&#x5C04;&#x5B9A;&#x4F4D;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=box-shadow" target="_blank">box-shadow</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/zYONxRG" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899242" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x4F7F;&#x7528;outline&#x63CF;&#x7ED8;&#x5185;&#x8FB9;&#x6846;"><a name="&#x4F7F;&#x7528;outline&#x63CF;&#x7ED8;&#x5185;&#x8FB9;&#x6846;" class="anchor-navigation-ex-anchor" href="#&#x4F7F;&#x7528;outline&#x63CF;&#x7ED8;&#x5185;&#x8FB9;&#x6846;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4F7F;&#x7528;outline&#x63CF;&#x7ED8;&#x5185;&#x8FB9;&#x6846;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x901A;&#x8FC7;<code>outline</code>&#x8BBE;&#x7F6E;&#x8F6E;&#x5ED3;&#x8FDB;&#x884C;&#x63CF;&#x8FB9;&#xFF0C;&#x53EF;&#x8BBE;&#x7F6E;<code>outline-offset</code>&#x8BBE;&#x7F6E;&#x5185;&#x63CF;&#x8FB9;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x5185;&#x63CF;&#x8FB9;</strong>&#x3001;<strong>&#x5916;&#x63CF;&#x8FB9;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=outline" target="_blank">outline</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/pozeVyL" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899243" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h3 id="component-skill"><a name="component-skill" class="anchor-navigation-ex-anchor" href="#component-skill"><i class="fa fa-link" aria-hidden="true"></i></a>1.1.8. Component Skill</h3>
<h5 id="&#x8FED;&#x4EE3;&#x8BA1;&#x6570;&#x5668;"><a name="&#x8FED;&#x4EE3;&#x8BA1;&#x6570;&#x5668;" class="anchor-navigation-ex-anchor" href="#&#x8FED;&#x4EE3;&#x8BA1;&#x6570;&#x5668;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x8FED;&#x4EE3;&#x8BA1;&#x6570;&#x5668;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x7D2F;&#x52A0;&#x9009;&#x9879;&#x5355;&#x4F4D;&#x7684;&#x8BA1;&#x6570;&#x5668;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x7AE0;&#x8282;&#x76EE;&#x5F55;</strong>&#x3001;<strong>&#x9009;&#x9879;&#x8BA1;&#x6570;&#x5668;</strong>&#x3001;<a href="https://codepen.io/CSSKing/pen/vEeMey" target="_blank"><strong>&#x52A0;&#x6CD5;&#x8BA1;&#x6570;&#x5668;</strong></a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=counters" target="_blank">counters</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/rXqRPo" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899244" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x4E0B;&#x5212;&#x7EBF;&#x8DDF;&#x968F;&#x5BFC;&#x822A;&#x680F;"><a name="&#x4E0B;&#x5212;&#x7EBF;&#x8DDF;&#x968F;&#x5BFC;&#x822A;&#x680F;" class="anchor-navigation-ex-anchor" href="#&#x4E0B;&#x5212;&#x7EBF;&#x8DDF;&#x968F;&#x5BFC;&#x822A;&#x680F;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4E0B;&#x5212;&#x7EBF;&#x8DDF;&#x968F;&#x5BFC;&#x822A;&#x680F;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x4E0B;&#x5212;&#x7EBF;&#x8DDF;&#x968F;&#x9F20;&#x6807;&#x79FB;&#x52A8;&#x7684;&#x5BFC;&#x822A;&#x680F;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x52A8;&#x6001;&#x5BFC;&#x822A;&#x680F;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=+" target="_blank">+</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/eYOJbNv" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899245" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x6C14;&#x6CE1;&#x80CC;&#x666F;&#x5899;"><a name="&#x6C14;&#x6CE1;&#x80CC;&#x666F;&#x5899;" class="anchor-navigation-ex-anchor" href="#&#x6C14;&#x6CE1;&#x80CC;&#x666F;&#x5899;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x6C14;&#x6CE1;&#x80CC;&#x666F;&#x5899;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x4E0D;&#x95F4;&#x65AD;&#x5192;&#x51FA;&#x6C14;&#x6CE1;&#x7684;&#x80CC;&#x666F;&#x5899;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x52A8;&#x6001;&#x80CC;&#x666F;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://www.caniuse.com/#search=animation" target="_blank">animation</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/GRKoPdK" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899246" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x6EDA;&#x52A8;&#x6307;&#x793A;&#x5668;"><a name="&#x6EDA;&#x52A8;&#x6307;&#x793A;&#x5668;" class="anchor-navigation-ex-anchor" href="#&#x6EDA;&#x52A8;&#x6307;&#x793A;&#x5668;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x6EDA;&#x52A8;&#x6307;&#x793A;&#x5668;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x63D0;&#x793A;&#x6EDA;&#x52A8;&#x8FDB;&#x5EA6;&#x7684;&#x6307;&#x793A;&#x5668;</li>
<li>&#x573A;&#x666F;&#xFF1A;<a href="https://codepen.io/MadeByMike/pen/ZOrEmr" target="_blank"><strong>&#x9605;&#x8BFB;&#x8FDB;&#x5EA6;</strong></a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=calc(" target="_blank">calc()</a>)&#x3001;<a href="https://caniuse.com/#search=gradient" target="_blank">gradient</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/ExYPMog" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899247" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x6545;&#x969C;&#x6587;&#x672C;"><a name="&#x6545;&#x969C;&#x6587;&#x672C;" class="anchor-navigation-ex-anchor" href="#&#x6545;&#x969C;&#x6587;&#x672C;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x6545;&#x969C;&#x6587;&#x672C;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x663E;&#x793A;&#x5668;&#x6545;&#x969C;&#x5F62;&#x5F0F;&#x7684;&#x6587;&#x672C;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x9519;&#x8BEF;&#x63D0;&#x793A;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=data-" target="_blank">data-*</a>&#x3001;<a href="https://caniuse.com/#search=attr(" target="_blank">attr()</a>)&#x3001;<a href="https://www.caniuse.com/#search=animation" target="_blank">animation</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/xxKZNYv" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899248" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x6362;&#x8272;&#x5668;"><a name="&#x6362;&#x8272;&#x5668;" class="anchor-navigation-ex-anchor" href="#&#x6362;&#x8272;&#x5668;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x6362;&#x8272;&#x5668;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x901A;&#x8FC7;&#x62FE;&#x8272;&#x5668;&#x6539;&#x53D8;&#x56FE;&#x50CF;&#x8272;&#x76F8;&#x7684;&#x6362;&#x8272;&#x5668;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x56FE;&#x7247;&#x8272;&#x5F69;&#x53D8;&#x6362;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://www.caniuse.com/#search=mix-blend-mode" target="_blank">mix-blend-mode</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/vYBLqBm" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899249" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x72B6;&#x6001;&#x60AC;&#x6D6E;&#x7403;"><a name="&#x72B6;&#x6001;&#x60AC;&#x6D6E;&#x7403;" class="anchor-navigation-ex-anchor" href="#&#x72B6;&#x6001;&#x60AC;&#x6D6E;&#x7403;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x72B6;&#x6001;&#x60AC;&#x6D6E;&#x7403;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x5C55;&#x793A;&#x5F53;&#x524D;&#x72B6;&#x6001;&#x7684;&#x60AC;&#x6D6E;&#x7403;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x72B6;&#x6001;&#x52A8;&#x6001;&#x663E;&#x793A;</strong>&#x3001;<strong>&#x6CE2;&#x6D6A;&#x52A8;&#x753B;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=gradient" target="_blank">gradient</a>&#x3001;<a href="https://www.caniuse.com/#search=animation" target="_blank">animation</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/WNewOxa" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899250" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x7C98;&#x7C98;&#x7403;"><a name="&#x7C98;&#x7C98;&#x7403;" class="anchor-navigation-ex-anchor" href="#&#x7C98;&#x7C98;&#x7403;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x7C98;&#x7C98;&#x7403;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x76F8;&#x4EA4;&#x7C98;&#x7C98;&#x6548;&#x679C;&#x7684;&#x53CC;&#x7403;&#x56DE;&#x5F39;&#x8FD0;&#x52A8;</li>
<li>&#x573A;&#x666F;&#xFF1A;<a href="https://codepen.io/Chokcoco/pen/QqWBqV" target="_blank"><strong>&#x7C98;&#x7C98;&#x52A8;&#x753B;</strong></a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=filter" target="_blank">filter</a>&#x3001;<a href="https://www.caniuse.com/#search=animation" target="_blank">animation</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/zYOqdBz" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899251" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x5546;&#x57CE;&#x7968;&#x5238;"><a name="&#x5546;&#x57CE;&#x7968;&#x5238;" class="anchor-navigation-ex-anchor" href="#&#x5546;&#x57CE;&#x7968;&#x5238;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x5546;&#x57CE;&#x7968;&#x5238;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x8FB9;&#x7F18;&#x5E26;&#x5B54;&#x548C;&#x4E2D;&#x95F4;&#x6298;&#x75D5;&#x7684;&#x7968;&#x52B5;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x7535;&#x5F71;&#x7968;</strong>&#x3001;<strong>&#x4EE3;&#x91D1;&#x5238;</strong>&#x3001;<strong>&#x6D88;&#x8D39;&#x5361;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=gradient" target="_blank">gradient</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/rNBeYza" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899252" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x5012;&#x5F71;&#x52A0;&#x8F7D;&#x6761;"><a name="&#x5012;&#x5F71;&#x52A0;&#x8F7D;&#x6761;" class="anchor-navigation-ex-anchor" href="#&#x5012;&#x5F71;&#x52A0;&#x8F7D;&#x6761;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x5012;&#x5F71;&#x52A0;&#x8F7D;&#x6761;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x5E26;&#x6709;&#x6E10;&#x53D8;&#x5012;&#x5F71;&#x7684;&#x52A0;&#x8F7D;&#x6761;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x52A0;&#x8F7D;&#x63D0;&#x793A;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=box-reflect" target="_blank">box-reflect</a>&#x3001;<a href="https://www.caniuse.com/#search=animation" target="_blank">animation</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/GRKZzpg" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899253" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x4E09;&#x7EF4;&#x7ACB;&#x65B9;&#x4F53;"><a name="&#x4E09;&#x7EF4;&#x7ACB;&#x65B9;&#x4F53;" class="anchor-navigation-ex-anchor" href="#&#x4E09;&#x7EF4;&#x7ACB;&#x65B9;&#x4F53;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4E09;&#x7EF4;&#x7ACB;&#x65B9;&#x4F53;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x4E09;&#x7EF4;&#x5EFA;&#x6A21;&#x7684;&#x7ACB;&#x65B9;&#x4F53;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x4E09;&#x7EF4;&#x5EFA;&#x6A21;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=transform" target="_blank">transform</a>&#x3001;<a href="https://caniuse.com/#search=perspective" target="_blank">perspective</a>&#x3001;<a href="https://caniuse.com/#search=transform-style" target="_blank">transform-style</a>&#x3001;<a href="https://www.caniuse.com/#search=animation" target="_blank">animation</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/PoYNgXY" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899254" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x52A8;&#x6001;&#x8FB9;&#x6846;"><a name="&#x52A8;&#x6001;&#x8FB9;&#x6846;" class="anchor-navigation-ex-anchor" href="#&#x52A8;&#x6001;&#x8FB9;&#x6846;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x52A8;&#x6001;&#x8FB9;&#x6846;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x9F20;&#x6807;&#x60AC;&#x6D6E;&#x65F6;&#x52A8;&#x6001;&#x6E10;&#x53D8;&#x663E;&#x793A;&#x7684;&#x8FB9;&#x6846;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x60AC;&#x6D6E;&#x6309;&#x94AE;</strong>&#x3001;<strong>&#x8FB9;&#x6846;&#x52A8;&#x753B;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=gradient" target="_blank">gradient</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/qBWZPvE" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899255" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x6807;&#x7B7E;&#x9875;"><a name="&#x6807;&#x7B7E;&#x9875;" class="anchor-navigation-ex-anchor" href="#&#x6807;&#x7B7E;&#x9875;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x6807;&#x7B7E;&#x9875;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x53EF;&#x5207;&#x6362;&#x5185;&#x5BB9;&#x7684;&#x6807;&#x7B7E;&#x9875;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x5185;&#x5BB9;&#x5207;&#x6362;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=scroll-behavior" target="_blank">scroll-behavior</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/JjPRjMd" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899256" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x6807;&#x7B7E;&#x5BFC;&#x822A;&#x680F;"><a name="&#x6807;&#x7B7E;&#x5BFC;&#x822A;&#x680F;" class="anchor-navigation-ex-anchor" href="#&#x6807;&#x7B7E;&#x5BFC;&#x822A;&#x680F;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x6807;&#x7B7E;&#x5BFC;&#x822A;&#x680F;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x53EF;&#x5207;&#x6362;&#x5185;&#x5BB9;&#x7684;&#x5BFC;&#x822A;&#x680F;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x9875;&#x9762;&#x5207;&#x6362;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=~" target="_blank">~</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/oNvzoZg" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899257" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x6298;&#x53E0;&#x9762;&#x677F;"><a name="&#x6298;&#x53E0;&#x9762;&#x677F;" class="anchor-navigation-ex-anchor" href="#&#x6298;&#x53E0;&#x9762;&#x677F;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x6298;&#x53E0;&#x9762;&#x677F;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x53EF;&#x6298;&#x53E0;&#x5185;&#x5BB9;&#x7684;&#x9762;&#x677F;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x9690;&#x85CF;&#x5F0F;&#x5B50;&#x5BFC;&#x822A;&#x680F;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=~" target="_blank">~</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/NWKRMjo" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899258" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x661F;&#x7EA7;&#x8BC4;&#x5206;"><a name="&#x661F;&#x7EA7;&#x8BC4;&#x5206;" class="anchor-navigation-ex-anchor" href="#&#x661F;&#x7EA7;&#x8BC4;&#x5206;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x661F;&#x7EA7;&#x8BC4;&#x5206;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x70B9;&#x51FB;&#x661F;&#x661F;&#x8FDB;&#x884C;&#x8BC4;&#x5206;&#x7684;&#x6309;&#x94AE;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x8BC4;&#x5206;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=~" target="_blank">~</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/MWgjGMj" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899259" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x52A0;&#x8F7D;&#x6307;&#x793A;&#x5668;"><a name="&#x52A0;&#x8F7D;&#x6307;&#x793A;&#x5668;" class="anchor-navigation-ex-anchor" href="#&#x52A0;&#x8F7D;&#x6307;&#x793A;&#x5668;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x52A0;&#x8F7D;&#x6307;&#x793A;&#x5668;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x53D8;&#x6362;<code>...</code>&#x957F;&#x5EA6;&#x7684;&#x52A0;&#x8F7D;&#x63D0;&#x793A;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x52A0;&#x8F7D;&#x63D0;&#x793A;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://www.caniuse.com/#search=animation" target="_blank">animation</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/wvwoRbN" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899260" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x81EA;&#x9002;&#x5E94;&#x76F8;&#x518C;"><a name="&#x81EA;&#x9002;&#x5E94;&#x76F8;&#x518C;" class="anchor-navigation-ex-anchor" href="#&#x81EA;&#x9002;&#x5E94;&#x76F8;&#x518C;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x81EA;&#x9002;&#x5E94;&#x76F8;&#x518C;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x81EA;&#x9002;&#x5E94;&#x7167;&#x7247;&#x6570;&#x91CF;&#x7684;&#x76F8;&#x518C;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x4E5D;&#x5BAB;&#x683C;&#x76F8;&#x518C;</strong>&#x3001;<strong>&#x5FAE;&#x4FE1;&#x76F8;&#x518C;</strong>&#x3001;<strong>&#x56FE;&#x96C6;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=%3Aonly-child" target="_blank">:only-child</a>&#x3001;<a href="https://caniuse.com/#search=%3Afirst-child" target="_blank">:first-child</a>&#x3001;<a href="https://caniuse.com/#search=%3Anth-child(" target="_blank">:nth-child()</a>)&#x3001;<a href="https://caniuse.com/#search=%3Anth-last-child(" target="_blank">:nth-last-child()</a>)&#x3001;<a href="https://caniuse.com/#search=~" target="_blank">~</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/pozNGyj" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899261" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x5706;&#x89D2;&#x8FDB;&#x5EA6;&#x6761;"><a name="&#x5706;&#x89D2;&#x8FDB;&#x5EA6;&#x6761;" class="anchor-navigation-ex-anchor" href="#&#x5706;&#x89D2;&#x8FDB;&#x5EA6;&#x6761;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x5706;&#x89D2;&#x8FDB;&#x5EA6;&#x6761;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x5355;&#x4E00;&#x989C;&#x8272;&#x7684;&#x5706;&#x89D2;&#x8FDB;&#x5EA6;&#x6761;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x8FDB;&#x5EA6;&#x6761;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=gradient" target="_blank">gradient</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/jONBxaK" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899262" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x87BA;&#x7EB9;&#x8FDB;&#x5EA6;&#x6761;"><a name="&#x87BA;&#x7EB9;&#x8FDB;&#x5EA6;&#x6761;" class="anchor-navigation-ex-anchor" href="#&#x87BA;&#x7EB9;&#x8FDB;&#x5EA6;&#x6761;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x87BA;&#x7EB9;&#x8FDB;&#x5EA6;&#x6761;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x6E10;&#x53D8;&#x87BA;&#x7EB9;&#x7684;&#x8FDB;&#x5EA6;&#x6761;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x8FDB;&#x5EA6;&#x6761;</strong>&#x3001;<strong>&#x52A0;&#x8F7D;&#x52A8;&#x753B;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=gradient" target="_blank">gradient</a>&#x3001;<a href="https://www.caniuse.com/#search=animation" target="_blank">animation</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/GRKrJJX" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899263" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x7ACB;&#x4F53;&#x6309;&#x94AE;"><a name="&#x7ACB;&#x4F53;&#x6309;&#x94AE;" class="anchor-navigation-ex-anchor" href="#&#x7ACB;&#x4F53;&#x6309;&#x94AE;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x7ACB;&#x4F53;&#x6309;&#x94AE;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x70B9;&#x51FB;&#x5448;&#x73B0;&#x6309;&#x4E0B;&#x72B6;&#x6001;&#x7684;&#x6309;&#x94AE;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x6309;&#x94AE;&#x70B9;&#x51FB;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=box-shadow" target="_blank">box-shadow</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/PoYpaLL" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899264" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x6DF7;&#x6C8C;&#x52A0;&#x8F7D;&#x5708;"><a name="&#x6DF7;&#x6C8C;&#x52A0;&#x8F7D;&#x5708;" class="anchor-navigation-ex-anchor" href="#&#x6DF7;&#x6C8C;&#x52A0;&#x8F7D;&#x5708;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x6DF7;&#x6C8C;&#x52A0;&#x8F7D;&#x5708;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x5E26;&#x6DF7;&#x6C8C;&#x865A;&#x5F71;&#x7684;&#x52A0;&#x8F7D;&#x5708;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x52A0;&#x8F7D;&#x63D0;&#x793A;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=filter" target="_blank">filter</a>&#x3001;<a href="https://www.caniuse.com/#search=animation" target="_blank">animation</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/aboWbqG" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899265" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x86C7;&#x5F62;&#x8FB9;&#x6846;"><a name="&#x86C7;&#x5F62;&#x8FB9;&#x6846;" class="anchor-navigation-ex-anchor" href="#&#x86C7;&#x5F62;&#x8FB9;&#x6846;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x86C7;&#x5F62;&#x8FB9;&#x6846;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x86C7;&#x5F62;&#x8FD0;&#x52A8;&#x7684;&#x8FB9;&#x6846;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x86C7;&#x5F62;&#x52A8;&#x753B;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=clip" target="_blank">clip</a>&#x3001;<a href="https://www.caniuse.com/#search=animation" target="_blank">animation</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/GRKmgZZ" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899266" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h5 id="&#x81EA;&#x52A8;&#x6253;&#x5B57;"><a name="&#x81EA;&#x52A8;&#x6253;&#x5B57;" class="anchor-navigation-ex-anchor" href="#&#x81EA;&#x52A8;&#x6253;&#x5B57;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x81EA;&#x52A8;&#x6253;&#x5B57;</h5>
<ul>
<li>&#x8981;&#x70B9;&#xFF1A;&#x9010;&#x4E2A;&#x5B57;&#x7B26;&#x81EA;&#x52A8;&#x6253;&#x5370;&#x51FA;&#x6765;&#x7684;&#x6587;&#x5B57;</li>
<li>&#x573A;&#x666F;&#xFF1A;<strong>&#x4EE3;&#x7801;&#x6F14;&#x793A;</strong>&#x3001;<strong>&#x6587;&#x5B57;&#x8F93;&#x5165;&#x52A8;&#x753B;</strong></li>
<li>&#x517C;&#x5BB9;&#xFF1A;<a href="https://caniuse.com/#search=ch" target="_blank">ch</a>&#x3001;<a href="https://www.caniuse.com/#search=animation" target="_blank">animation</a></li>
<li>&#x4EE3;&#x7801;&#xFF1A;<a href="https://codepen.io/JowayYoung/pen/ZEzKQEx" target="_blank">&#x5728;&#x7EBF;&#x6F14;&#x793A;</a>&#x70B9;&#x51FB;&#x9884;&#x89C8;</li>
</ul>
<p><img src="https://segmentfault.com/img/remote/1460000020899267" alt="&#x5728;&#x7EBF;&#x6F14;&#x793A;"></p>
<h3 id="&#x603B;&#x7ED3;"><a name="&#x603B;&#x7ED3;" class="anchor-navigation-ex-anchor" href="#&#x603B;&#x7ED3;"><i class="fa fa-link" aria-hidden="true"></i></a>1.1.9. &#x603B;&#x7ED3;</h3>
<p>&#x5199;&#x5230;&#x6700;&#x540E;&#x603B;&#x7ED3;&#x5F97;&#x5DEE;&#x4E0D;&#x591A;&#x4E86;&#xFF0C;&#x5982;&#x679C;&#x540E;&#x7EED;&#x6211;&#x60F3;&#x8D77;&#x8FD8;&#x6709;&#x54EA;&#x4E9B;&#x9057;&#x6F0F;&#x7684;<strong>CSS&#x5F00;&#x53D1;&#x6280;&#x5DE7;</strong>&#xFF0C;&#x4F1A;&#x7EE7;&#x7EED;&#x5728;&#x8FD9;&#x7BC7;&#x6587;&#x7AE0;&#x4E0A;&#x8865;&#x5168;&#x3002;</p>
<p>&#x6700;&#x540E;&#x9001;&#x5927;&#x5BB6;&#x4E00;&#x4E2A;&#x952E;&#x76D8;&#xFF01;</p>
<pre><code>(_=&gt;[...&quot;`1234567890-=~~QWERTYUIOP[]\\~ASDFGHJKL;&apos;~~ZXCVBNM,./~&quot;].map(x=&gt;(o+=`/${b=&apos;_&apos;.repeat(w=x&lt;y?2:&apos; 667699&apos;[x=[&quot;Bs&quot;,&quot;Tab&quot;,&quot;Caps&quot;,&quot;Enter&quot;][p++]||&apos;Shift&apos;,p])}\\|`,m+=y+(x+&apos;    &apos;).slice(0,w)+y+y,n+=y+b+y+y,l+=&apos; __&apos;+b)[73]&amp;&amp;(k.push(l,m,n,o),l=&apos;&apos;,m=n=o=y),m=n=o=y=&apos;|&apos;,p=l=k=[])&amp;&amp;k.join`
`)()
</code></pre><footer class="page-footer"><span class="copyright">Copyright &#xA9; zhengyuliang all right reserved&#xFF0C;powered by Gitbook</span><span class="footer-modification">&#x8BE5;&#x6587;&#x4EF6;&#x7F16;&#x5199;&#x65F6;&#x95F4;&#xFF1A;
2020-09-09 19:36:13
</span></footer></body></html>
                                
                                </section>
                            
    </div>
    <div class="search-results">
        <div class="has-results">
            
            <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
            <ul class="search-results-list"></ul>
            
        </div>
        <div class="no-results">
            
            <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
            
        </div>
    </div>
</div>

                        </div>
                    </div>
                
            </div>

            
                
                <a href="18种CSS命名和书写规范.html" class="navigation navigation-prev " aria-label="Previous page: 18种CSS命名和书写规范">
                    <i class="fa fa-angle-left"></i>
                </a>
                
                
                <a href="自适应 flex grid.html" class="navigation navigation-next " aria-label="Next page: 自适应 Flex Grid">
                    <i class="fa fa-angle-right"></i>
                </a>
                
            
        
    </div>

    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"title":"灵活运用CSS开发技巧","level":"1.3","depth":1,"next":{"title":"自适应 Flex Grid","level":"1.4","depth":1,"path":"CSS/自适应 flex grid.md","ref":"CSS/自适应 flex grid.md","articles":[]},"previous":{"title":"18种CSS命名和书写规范","level":"1.2","depth":1,"path":"CSS/18种CSS命名和书写规范.md","ref":"CSS/18种CSS命名和书写规范.md","articles":[]},"dir":"ltr"},"config":{"plugins":["sectionx","splitter","tbfed-pagefooter","toggle-chapters","theme-comscore","-lunr","-search","search-plus","donate","anchor-navigation-ex","expandable-chapters","chapter-fold","expandable-chapters-small","livereload"],"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"tbfed-pagefooter":{"copyright":"Copyright &copy zhengyuliang","modify_label":"该文件编写时间：","modify_format":"YYYY-MM-DD HH:mm:ss"},"chapter-fold":{},"pluginsConfig":{"anchor-navigation-ex":{"showLevel":false,"showGoTop":true,"isRewritePageTitle":true,"isShowTocTitleIcon":true,"tocLevel1Icon":"fa fa-hand-o-right","tocLevel2Icon":"fa fa-hand-o-right","tocLevel3Icon":"fa fa-hand-o-right"}},"livereload":{},"splitter":{},"donate":{"title":"","button":"赏","wechat":"https://gitee.com/htzyl/img_bed/raw/master/pay/weixin-min.jpg","alipay":"https://gitee.com/htzyl/img_bed/raw/master/pay/alipay-min.jpg","wechatText":"微信打赏","alipayText":"支付宝打赏"},"fontsettings":{"theme":"white","family":"sans","size":2},"sectionx":{"tag":"b"},"highlight":{},"anchor-navigation-ex":{"showLevel":true,"associatedWithSummary":true,"mode":"float","showGoTop":true,"printLog":false,"multipleH1":true,"float":{"floatIcon":"fa fa-navicon","showLevelIcon":false,"level1Icon":"","level2Icon":"","level3Icon":""},"pageTop":{"showLevelIcon":false,"level1Icon":"","level2Icon":"","level3Icon":""}},"theme-comscore":{},"expandable-chapters-small":{},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false},"toggle-chapters":{},"expandable-chapters":{},"search-plus":{}},"theme":"default","author":"zhengyuliang","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"title":"记录技术文档内容","language":"zh-hans","gitbook":">=3.0.0","description":"记录Gitbook的配置和一些插件的使用","theme-default":{"showLevel":true}},"file":{"path":"CSS/灵活运用CSS开发技巧.md","mtime":"2020-09-09T11:36:13.781Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2022-01-06T09:44:01.178Z"},"basePath":"..","book":{"language":""}});
        });
    </script>
</div>

        
    <script src="../gitbook/gitbook.js"></script>
    <script src="../gitbook/theme.js"></script>
    
        
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-sectionx/sectionx.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-splitter/splitter.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-toggle-chapters/toggle.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-search-plus/jquery.mark.min.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-search-plus/search.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-donate/plugin.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-expandable-chapters/expandable-chapters.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-chapter-fold/chapter-fold.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-expandable-chapters-small/expandable-chapters-small.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-livereload/plugin.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-theme-comscore/test.js"></script>
        
    

    </body>
</html>

